行的方法
對于div,p等塊級元素
正常文字的換行(亞洲文字和非亞洲文字)元素擁有默認的white-space:normal,當定義的寬度之后自動換行
html
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;}
效果：可以實現換行
2.（Firefox瀏覽器）連續的英文字符和阿拉伯數字的斷行,Firefox的所有版本的沒有
解決這個問題,
我們只有讓超出邊界的字符隱藏或者,給容器添加滾動條
#wrap
{word-break:break-all; width:200px; overflow:auto;}
效果：容器正常，內容隱藏
對于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的方法
運行代碼框100素材網
最后，這種現象出現的幾率很小，但是不能排除網友的惡搞。如果
有什么問題請到在下面留言
下面是提到的例子的效果
<!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>
【 微信掃一掃 】
