[教學] word-break, word-wrap, overflow-wrap 的差別是什麼 ...

word-break 決定如何斷行「單詞」。

所謂的單詞，指的是像英文中的“word” 就是一個單詞。

word-break 可以針對CJK (中日韓) 和non-CJK 的文字採取不 ... 在使用者可以留言的網站中，經常會出現長連結或者是太長的英文字使得文字超出頁面範圍，讓網站跑版。

這時候我們可以用CSS做到強制文字換行的效果，可以使用的屬性有word-break,word-wrap,overflow-wrap等，他們的用法是什麼，又有什麼不一樣呢？ 目錄 TL;DR word-break overflow-wrap word-wrap 結論 參考資料 TL;DR 用以下的設定，就可以讓連結或是長文字不會造成跑版： overflow-wrap:break-word; word-break word-break決定如何斷行「單詞」。

所謂的單詞，指的是像英文中的“word”就是一個單詞。

word-break可以針對CJK(中日韓)和non-CJK的文字採取不一樣的斷詞規則。

normal:預設值，英文不會在單詞中間斷開，CJK字元會在任意位置斷開。

break-all:英文和CJK會在任意位址斷開。

keep-all:英文不會在字中間斷開，CJK字元也不會在任意位置斷開。

下面是三種值的示範： word-break:normal; word-break:break-all; word-break:keep-all; overflow-wrap overflow-wrap屬性的作用是告訴瀏覽器，如果詞斷行後的結果還是會溢出容器元素，該如何處理。

normal：預設值，如果文字太長，可能會溢出容器元素。

break-word：如果文字太長，沒辦法裝進容器元素裡，允許文字在任意位置斷行。

範例如下： word-wrap:normal; word-wrap:break-word; word-wrap word-wrap其實就是overflow-wrap的別名。

結論 一般來說CJK的內容不太需要特別處理斷行的問題，另外使用word-break:break-all也容易讓過多的英文單詞斷在中間，造成閱讀不適。

因此大部分的情況overflow-wrap:break-all應該就很夠用了。

參考資料 overflow-wrap-MDN overflow-wrap-CSSTricks word-break-MDN word-break-CSSTricks [css]word-break、word-wrap(overflow-wrap)及white-space的差別與用法←[教學]二元堆積(BinaryHeap)、最小堆積(MinHeap)與最大堆積(MaxHeap)[教學]BinarySearch二元搜尋法→Shubo的程式開發筆記