css中強制換行word-break、word-wrap、white-space區別實例說明，需要的朋友可以參考下
測試用的HTML程式碼
<p class="c1">safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</p> <p class=c1>This is all English. This is all English. This is all English.</p> <p class=c1>全是中文的情况。全是中文的情况。全是中文的情况。</p> <p class=c1>中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.</p>复制代码
程式碼如下:
.c1{ width:300px;word-break:normal;border:1px solid red;}[object Object]
如果內容是長英文字串的話，IE6會把容器撐開，其他瀏覽器只會溢出，不會撐開
代碼如下:
.c1{ width:300px;word-break:break-all;border:1px solid red;}
長英文字串在火狐下方不能換行
程式碼如下:
.c1{ width:300px;word-break:keep-all;border:1px solid red;}
#IE6下，英文長字創和中文長句會撐開容器，IE7、IE8直接溢出，火狐下只有長英文字串會溢出。
程式碼如下:
.c1{ width:300px;word-wrap:normal;border:1px solid red;}這個跟第一種情況一樣
程式碼如下:
.c1{ width:300px;word-wrap:break-word;border:1px solid red;}
所有瀏覽器都換行了
程式碼如下:
.c1{ width:300px;white-space:normal;border:1px solid red;}跟第一種情況一樣
程式碼如下:
.c1{ width:300px;white-space:pre;border:1px solid red;}
#### IE6下全部撐開，IE7、IE8、Firefox下全部溢出 ######代碼如下:###
.c1{ width:300px;white-space:nowrap;border:1px solid red;}以上是css中強制換行word-break、word-wrap、white-space的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
