《网页对象内容自动换行控制方法.doc》由会员分享，可在线阅读，更多相关《网页对象内容自动换行控制方法.doc（4页珍藏版）》请在金锄头文库上搜索。
1、网页对象内容自动换行控制方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义css#wrapwhite-space:normal; width:200px; 1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行#wrapword-break:break-all; width:200px;或者#wr
2、apword-wrap:break-word; width:200px;abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111效果：可以实现换行2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条#wrapword-break:break-all; width:200px; overflow:auto;abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111效果：容器正常，内容隐藏对于table1.
3、 (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏 abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss效果：隐藏多余内容2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行abcdefghigklmnopqrstuvwxyz 1234567890abcdefghigklmnopqrstuvwxyz 1234567890效果：可以换行3. (IE浏览器)
4、在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;无法起作用abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890效果：隐藏多于内容5.(Firefox浏览器) 在td,th中嵌套div,p等采用上
5、面提到的对付Firefox的方法运行代码框最后，这种现象出现的几率很小，但是不能排除网友的恶搞。下面是提到的例子的效果字符换行table,td,th,div border:1px green solid;code font-family:Courier New, Courier, monospace;divAll 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
6、 cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenarioIE word-wrap : break-word ;abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111IE word-break:break-all;abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111Firefox
7、/ word-break:break-all; overflow:auto;abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111tabletable-layout:fixed;abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssstable-layout:fixed; word-break : break-all; word-wrap : break-word ;abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssssabcdefghigklmnopqrstuvwxyz1234567890ssssssssssssssFF table-layout:fixed; overflow:hidden;abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890
