DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> CSS word-break與word-wrap的使用
CSS word-break與word-wrap的使用
編輯:前端技巧      日期:2016/12/22 14:22:58

一般情況下,元素擁有默認的white-space:normal(自動換行,不換行是white-space:nowrap),當錄入的文字超過定義的寬度後會自動換行,但當錄入的數據是一堆沒有空格的字符或字母或數字(常規數據應該不會有吧,但有些測試人員是會這樣子做的),超過容器寬度時就會把容器撐大,不換行。

所以解決方法(以IE,chrome,FF為測試浏覽器)有兩種寫法:

 
word-break:break-all; 
word-wrap:break-word;

一、兩種方法的區別說明:

1、word-break:break-all 例如div寬400px,它的內容就會到400px自動換行,如果該行末端有個英文單詞很長(congratulation等),它會把單詞截斷,變成該行末端為conra(congratulation的前端部分),下一行為tulation(conguatulation)的後端部分了。

2、word-wrap:break-word 例子與上面一樣,但區別就是它會把congratulation整個單詞看成一個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉的。

html代碼:

 
<div style="width:400px;background:#000;color:#fff;height:100px;margin:0 auto;word-break:break-all; ">
    congratulation congratulation congratulation congratulation congratulation congratulation
</div>
</br/>
<div style="width:400px;height:100px;background:#000;color:#fff;margin:0 auto;word-wrap:break-word;">
    congratulation congratulation congratulation congratulation congratulation congratulation
</div>

結果如圖所示:

這樣就一目了然了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved