行的方法
對(duì)于div,p等塊級(jí)元素
正常文字的換行(亞洲文字和非亞洲文字)元素?fù)碛心J(rèn)的white-space:normal,當(dāng)定義的寬度之后自動(dòng)換行
html
css
#wrap{white-space:normal; width:200px; }
1.（IE瀏覽器）連續(xù)的英文字符和阿拉伯?dāng)?shù)字,使用word-wrap : break-word ;
或者word-break:break-all;實(shí)現(xiàn)強(qiáng)制斷行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
效果：可以實(shí)現(xiàn)換行
2.（Firefox瀏覽器）連續(xù)的英文字符和阿拉伯?dāng)?shù)字的斷行,Firefox的所有版本的沒有
解決這個(gè)問題,
我們只有讓超出邊界的字符隱藏或者,給容器添加滾動(dòng)條
#wrap
{word-break:break-all; width:200px; overflow:auto;}
效果：容器正常，內(nèi)容隱藏
對(duì)于table
1. (IE瀏覽器)使用 table-layout:fixed;強(qiáng)制table的寬度,多余內(nèi)容隱藏
<table style="table-layout:fixed" width="200"> <tr> <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss </td> </tr> </table>
效果：隱藏多余內(nèi)容
2.(IE瀏覽器)使用 table-layout:fixed;強(qiáng)制table的寬度,
內(nèi)層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;強(qiáng)制table的寬度,內(nèi)層td,th采
用word-break : break-all;或者word-wrap : break-word ;換行，
使用overflow:hidden;隱藏超出內(nèi)容，這里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>
效果：隱藏多于內(nèi)容
5.(Firefox瀏覽器) 在td,th中嵌套div,p等采用上面提到的對(duì)付Firefox的方法
運(yùn)行代碼框100素材網(wǎng)
最后，這種現(xiàn)象出現(xiàn)的幾率很小，但是不能排除網(wǎng)友的惡搞。如果
有什么問題請(qǐng)到在下面留言
下面是提到的例子的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符換行
</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">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</div>
<h1><code>IE word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">
abcdefghijklmnabcdefghijklmnabcdefghijkl
mn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap :
break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF table-layout:fixed; overflow:hidden;</code></h1>
<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>
</body>
</html>
【 微信掃一掃 】
