一、背景

　　最近项目中有用到在div中显示用户反馈的信息，是指定宽度的div,超出要自动换行，开始写好后感觉应该没什么问题，后来自己随便输入测试数据的时候发现：如果是纯字母或者是纯数字就会出现超出了也不会自动换行的问题，甚是无解，后经过努力，已经完美解决，下面来介绍解决方式。

二、解决方式

　　对于div,p等块级元素：正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。然后对于纯字母和纯数字则不行.如下图：

　　

解决办法是：

　　使用word-wrap:break-word ;或者word-break:break-all;实现强制断行.

添加以后的效果是：

　　

奏是这么任性~

CSS设置超出指定宽度自动换行的更多相关文章

  1. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  2. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. CSS设置表格TD宽度布局

    使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数 ...

  4. css设置超出部分文档隐藏（在table标签中不好使解决方案在下）

    css设置: .text-over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer} div设 ...

  5. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  6. CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

    <style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...

  7. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

  8. CSS文本超出指定行数省略显示

    单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...

  9. css文字超出指定行数显示省略号

    display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...

随机推荐

  1. ACM数论之旅7---欧拉函数的证明及代码实现（我会证明都是骗人的╮(￣▽￣)╭）

    欧拉函数,用φ(n)表示 欧拉函数是求小于等于n的数中与n互质的数的数目 辣么,怎么求哩?~(-o￣▽￣)-o 可以先在1到n-1中找到与n不互质的数,然后把他们减掉 比如φ(12) 把12质因数分解 ...

  2. 大数据之sqoopCDH 备份

    Sqoop课程笔记 一.概述 1.什么是sqoop? Hadoop的优势在于对数据的存储和处理,相比以前传统的数据库,在处理较较多的数据时,传统数据行业通过提升单机性能以提高处理性能,而且性价比随着性 ...

  3. gcc 4.8.3 install centos

    http://blog.csdn.net/xlx921027/article/details/17382643

  4. SQL server 语句新建用户、对用户授权、删除用户实例

    Grant select on tb to db_user --给db_user用户授权 tb表 查询权限 一.命令操作 USE mydb GO --1. 新建测试用户 --1.1 添加登录用户和密码 ...

  5. ASP.NET发送邮件（QQ发送）

    public void SetEmail()        {            //电子邮件对象            MailMessage mailMessage = new MailMes ...

  6. cocos2dx 做test遇到一个问题，记录下来

    我新建了一个group,然后再group里面创建一个文件A.h,再A.h中#include group同一级的文件CBaseTest.h,方法是: #include "../BaseTest ...

  7. SSH-Struts第二弹：一个Form提交两个Action

    根据CSDN中的博客:http://blog.csdn.net/forwayfarer/article/details/3030259进行学习. 1.多个submit的Form表单页面 or 在jsp ...

  8. BZOJ 3942: [Usaco2015 Feb]Censoring

    Description 有两个字符串,每次用一个中取出下一位,放在一个字符串中,如果当前字符串的后缀是另一个字符串就删除. Sol KMP+栈. 用一个栈来维护新加的字符串就可以了.. 一开始我非常的 ...

  9. MapReduce 程序运行报错 java.lang.ClassNotFoundException解决方法

    在创建自定义的Mapper时候,编译正确,但上传到集群执行时出现错误: 11/16/05 22:53:16 INFO mapred.JobClient: Task Id : attempt_20111 ...

  10. mybaits in

    mybatis中的in: <select id="getByInventoryIds" resultMap="beanMap"> SELECT * ...