本文共 2380 字，大约阅读时间需要 7 分钟。
在一个容器中，如果设定了宽度，一般来说自动换行都是比较正常的，但是如果遇到了连续的英文字符，这个问题就会让人头疼。这不，部门的用户在测试的时候输入连续的字符，就出现了容器被撑大而样式变形的情况发生，怎么解决这个问题呢？
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行，如下：
htmlxmlns="http://www.w3.org/1999/xhtml">字符换行 字符换行
div
IE浏览器中，连续的英文字符和阿拉伯数字可以通过word-wrap : break-word ;或者word-break:break-all;实现强制断行：
#wrapper { word-break: break-all; width: 200px;} 或者：
#wrapper { word-wrap: break-word; width: 200px;} 例如：
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果可以实现换行。
Firefox浏览器中，连续的英文字符和阿拉伯数字的断行问题，Firefox的所有版本都没有解决这个问题，我们只有让超出边界的字符隐藏或者给容器添加滚动条：
#wrapper { word-break: break-all; width: 200px; overflow: auto;} 例如：
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果：容器正常，内容隐藏。
对于表格：
IE浏览器中，使用 table-layout:fixed;强制表的宽度，多余内容隐藏：
| abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
效果：隐藏多余内容。
IE浏览器中，使用 table-layout:fixed;强制表的宽度，内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行：
| abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
效果：可以换行。
IE浏览器中，在td,th中嵌套div,p等采用上面提到的div,p的换行方法。
Firefox浏览器中，使用 table-layout:fixed;强制表的宽度，内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用：
效果：隐藏多于内容。
Firefox浏览器中，在td,th中嵌套div,p等采用上面提到的对付Firefox的方法。
以下是综合代码：
字符换行 字符换行
div
IE中，word-wrap : break-word ;：
#wrapper { word-wrap: break-word; width: 200px;} IE中，word-break:break-all;：
#wrapper { word-break: break-all; width: 200px;} Firefox中，word-break:break-all; 和 overflow:auto;：
#wrapper { word-break: break-all; width: 200px; overflow: auto;} 表格中的td,th嵌套div：
| abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss | abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
最终，表格中td嵌套div：
| abcdefghigklmnopqrstuvwxyz1234567890 | abcdefghigklmnopqrstuvwxyz1234567890 |
转载地址：http://fcrkz.baihongyu.com/