对于自动换行问题,正常字符的换行是合理的,而连续的数字和英文字符往往会扩大容器,这让人头疼。以下是CSS如何实现换行。
对于div,p等块级元素正常文本(亚洲文本和非亚洲文本)元素有默认的whitete-space:normal,定义宽度后,自动换行html。
<div id=”wrap”>正常文本(亚洲文本和非亚洲文本)元素有默认的whitete-space:normal,当定义</div>。
css
#wrap{white-space:normal; width:200px; }
1、使用word(IE浏览器)连续英文字符和阿拉伯数字-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的所有版本都没有解决这个问题。我们只需要隐藏超越边界的字符或向容器添加滚动条
Firefox3.wordd可用于6中测试-wrap:break-word强制换行,但word-break:break-all;仍无效
#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>ssssssssssssssssssssssssssssss </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; ">abcdefghigklmnopqrstuvwyz1245689</td> <td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwyz1245689</td> </tr> </table>
效果:比内容更隐藏
5.(Firefox浏览器) div嵌套在td、th中,p采用上述处理firefox的方法。