|
自动换行题目,正常字符的换行是较量公道的,而持续的数字和英笔墨符经常将容器撑大,挺让人头疼,下面先容的是CSS怎样实现换行的要领
对付div,p等块级元素
正常笔墨的换行(亚洲笔墨和非亚洲笔墨)元素拥有默认的white-space:normal,当界说的宽度之后自动换行
html
<div id="wrap">正常笔墨的换行(亚洲笔墨和非亚洲笔墨)元素拥有默认的white-space:normal,当界说</div>
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;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
结果：可以实现换行
2.（Firefox赏识器）持续的英笔墨符和阿拉伯数字的断行,Firefox的全部版本的没有办理这个题目,我们只有让超出界线的字符潜匿可能,给容器添加转动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
结果：容器正常，内偏护藏
对付table
1. (IE赏识器)行使 table-layout:fixed;逼迫table的宽度,多余内偏护藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
结果：潜匿多余内容
2.(IE赏识器)行使 table-layout:fixed;逼迫table的宽度,内层td,th回收word-break : break-all;可能word-wrap : break-word ;换行
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
结果：可以换行
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;无法起浸染
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
结果：潜匿多于内容
5.(Firefox赏识器) 在td,th中嵌套div,p等回收上面提到的搪塞Firefox的要领
运行代码框
下面是提到的全部代码：
提醒：可修改儿女码再运行!
（编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
