Css3中word-wrap屬性使用詳解及執行個體

我們都知道，word-wrap 屬性是CSS3的新屬性，那麼這篇文章就給大家詳細講解一下word-wrap屬性怎麼使用，以及使用的注意事項，下面來看一個小列子。

1、定義

word-wrap 屬性允許長單詞或 URL 地址換行到下一行。

2、文法和參數

word-wrap：normal（預設）|break-word normal：允許內容頂開指定的容器邊界，如果單詞超長，會衝出邊界（在當前行顯示，不會換行）。 break-word： 內容將在邊界內換行，當單詞在當前行放不下時，會自動切換到下一行，必要時會觸發word-break（注意：請分辨清楚word-break和break-word這倆個是不同的東西，一為屬性另為參數）。註：各個瀏覽器均能識別。

3、說明

word-wrap是控制是否“為詞斷行”的，設定或檢索當前行超過指定容器的邊界時是否斷開轉行。中文沒有任何問題，英文語句也沒問題。但是對於長串的英文，就不起作用。

4、例子

congratulation這個單詞屬於長串英文，word-wrap:break-word整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷，這就是對於長串文字不起作用的解釋。word-wrap:normal是預設情況，英文單詞不被拆開。

5、總結

作用範圍僅為div這類標準區塊層級元素，th,td這類table元素雖然識別但是沒有效果（如果為td,th加上寬度word-wrap在IE下是能夠發揮效果的，但根據完全相容性方便記憶角度上來說還是以前面的結論為準）。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎樣不使用CSS改變滑鼠移至上方樣式

HTML的網頁錯位原因以及解決方案

Js操作DOM對象的流程