一、背景

　　最近项目中有用到在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. hdu.1111.Secret Code(dfs + 秦九韶算法）

    Secret Code Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

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

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

  3. C语言中free函数是如何确定要释放多少内存空间的

    本文链接:http://www.cnblogs.com/xxNote/p/4009359.html 今天看书的时候看到free函数释放动态申请的内存时只需要把内存块的首地址传过去就行了,显然仅仅依靠首 ...

  4. C++ 复制构造函数

    C++类的设计中,如果某些函数没有显式定义,C++会自动生成,复制构造函数便是其中之一,其他的还有默认构造函数.赋值操作符.默认析构函数.地址操作符.一个类的复制构造函数的原型一般为: Class_n ...

  5. [BZOJ1833][ZJOI2010]count 数字计数

    [BZOJ1833][ZJOI2010]count 数字计数 试题描述 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. 输入 输入文件中仅包含一行两个整数a ...

  6. [KOJ6023]合并果子·改

    [COJ6023]合并果子·改 试题描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多把这些果子堆排成一排,然后所有的果子合成一堆.    每一次合并,多多可以 ...

  7. FTP 传输中的主动模式和被动模式

    最近做一个项目用到FTP和其它系统进行文件传输,结果在FTP网络连接的问题上花了很多时间,由于太久没搞多FTP,忘记了FTP不单单开放21端口,客户端采用不同连接模式对网络有不同.在此重温一下FTP的 ...

  8. echarts之字符云tooltip显示混乱问题的解决办法

    echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...

  9. github 多个项目共用同一个key的方法

    后面的项目不用添加ssh keys, 直接在项目下设置合作者(Collaborators), 搜索出去加进去即可免密码传代码.

  10. 【GoLang】golang 如何像Java 一样通过类名反射对象？

    结论: golang不支持解析string然后执行. golang的反射机制只能存在于已经存在的对象上面. 不知道后续的版本有没有规划,现在只能先加载注册,然后实现类似Java工厂模式的反射. 代码示 ...