css中強制換行word-break、word-wrap、white-space的區別

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;}

###與7相同#######以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########css 中的background:transparent的講解######################

以上是css中強制換行word-break、word-wrap、white-space的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！