div+CSS ⾥长英⽂字母如何⾃动换⾏？
⾃动换⾏问题，正常字符的换⾏是⽐较合理的,⽽连续的数字和英⽂字符常常将容器撑⼤，挺让⼈头疼，下⾯介绍的是CSS 如何实现换⾏的⽅法最佳CSS 定义换⾏代码
.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }
这⾥ overflow:hidden；或者 auto ； 对于div,p 等块级元素
正常⽂字的换⾏(亚洲⽂字和⾮亚洲⽂字)元素拥有默认的white-space:normal，当定义的宽度之后⾃动换⾏
html
正常⽂字的换⾏(亚洲⽂字和⾮亚洲⽂字)元素拥有默认的white-space:normal，当定义
css
#wrap{white-space:normal; width:200px; }
1.（IE 浏览器）连续的英⽂字符和阿拉伯数字，使⽤word-wrap : break-word ；或者word-break:break-all；实现强制断⾏
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果：可以实现换⾏
2.（Firefox 浏览器）连续的英⽂字符和阿拉伯数字的断⾏,Firefox 的所有版本的没有解决这个问题，我们只有让超出边界的字符隐藏或者，给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果：容器正常，内容隐藏
对于table
1. (IE 浏览器)使⽤ table-layout:fixed；强制table 的宽度，多余内容隐藏
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
效果：隐藏多余内容
2.(IE 浏览器)使⽤ table-layout:fixed；强制table 的宽度，内层td,th 采⽤word-break : break-all；或者word-wrap : break-word ；换⾏
abcdefghigklmnopqrstuvwxyz 1234567890abcdefghigklmnopq rstuvwxyz 1234567890
效果：可以换⾏
3. (IE 浏览器)在td,th 中嵌套div,p 等采⽤上⾯提到的div,p 的换⾏⽅法
4.(Firefox 浏览器)使⽤ table-layout:fixed；强制table 的宽度，内层td,th 采⽤word-break : break-all；或者word-wrap : break-word ；换⾏，使⽤overflow:hidden；隐藏超出内容，这⾥overflow:auto;⽆法起作⽤
abcdefgh abcdefghigklmnopq
rstuvwxyz12345678
90
效果：隐藏多于内容
5.(Firefox 浏览器) 在td,th 中嵌套div,p 等采⽤上⾯提到的对付Firefox 的⽅法
运⾏代码框
最后，这种现象出现的⼏率很⼩，但是不能排除⽹友的恶搞。
下⾯是提到的例⼦的效果
div
All white-space:normal;
Wordwrap still occurs in a td
element that has its WIDTH
attribute set to a value
smaller than the unwrapped
content of the cell, even if
the noWrap property is set
to true. Therefore, the
WIDTH attribute takes
precedence over the
noWrap property in this
scenario
IE \ word-wrap : break-word ;
abcdefghijklmnabcdefghijkl
mnabcdefghijklmn1111111
11
css横向滚动条隐藏IE \ word-break:break-all;
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Firefox/ word-break:break-all; overflow:auto;
abcdefghijklmnabcdefghijklmn
table
table-layout:fixed;
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
table-layout:fixed; word-break : break-all; word-wrap : break-word ;
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss abcdefghigklmnopq
rstuvwxyz12345678
90ssssssssssssss
FF \ table-layout:fixed; overflow:hidden;
abcdefgh abcdefghigklmnopq
rstuvwxyz12345678
90

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。