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

長英文字串在Firefox下不能換行

代碼如下:

.c1{ width:300px;word-break:keep-all;border:1px solid red;}

IE6下，英文長字元創和中文長句會撐開容器，IE7、IE8直接溢出，Firefox下只有長英文字串會溢出。

代碼如下:

.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相同

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！