???ㄦ?㈣???棰?,姝ｅ父瀛?绗????㈣???姣?杈???????,??杩?缁????板?????辨??瀛?绗?父甯稿?瀹瑰?ㄦ??澶??鸿?╀汉澶寸??涓????缁?????CSS濡?浣?瀹??版?㈣????规?
瀵逛?div,p绛???绾у??绱?
姝ｅ父??瀛????㈣?(浜?娲叉??瀛?????浜?娲叉??瀛?)??绱??ユ??榛?璁ょ??white-space:normal,褰?瀹?涔???瀹藉害涔??????ㄦ?㈣?
html
<div id="wrap">姝ｅ父??瀛????㈣?(浜?娲叉??瀛?????浜?娲叉??瀛?)??绱??ユ??榛?璁ょ??white-space:normal,褰?瀹?涔?</div>
css
#wrap{white-space:normal; width:200px; }
1.锛?IE娴?瑙????杩?缁????辨??瀛?绗????挎??浼??板??,浣跨??ord-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;寮哄??able??瀹藉害,澶?浣???瀹归????
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
????锛?????澶?浣???瀹?
2.(IE娴?瑙???浣跨??table-layout:fixed;寮哄??able??瀹藉害,??灞?td,th????ord-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娴?瑙?????d,th涓?宓?濂?div,p绛????ㄤ??㈡???扮??div,p???㈣??规?
4.(Firefox娴?瑙???浣跨??table-layout:fixed;寮哄??able??瀹藉害,??灞?td,th????ord-break : break-all;????word-wrap : break-word ;?㈣?锛?浣跨??verflow: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娴?瑙??? ??d,th涓?宓?濂?div,p绛????ㄤ??㈡???扮??瀵逛?Firefox???规?
杩?琛?浠ｇ??妗?
????锛?杩?绉??拌薄?虹?扮??????寰?灏?锛?浣???涓??芥???ょ??????舵????濡?????浠?涔???棰?璇峰?版??????瑷???????
涓??㈡?????扮??渚?瀛???????
<!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;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</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>
![CSS的伪类与伪元素的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)