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物件的流程

#

以上是Css3中word-wrap屬性使用詳解及實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！