如何用 CSS 強制文字換行: word-break, word-wrap, overflow-wrap

March 08, 2022

分類標籤:css

在使用者可以留言的網站中,經常會出現長連結或者是太長的英文字使得文字超出頁面範圍,讓網站跑版。這時候我們可以用 CSS 做到強制文字換行的效果,可以使用的屬性有 word-break, word-wrap, overflow-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: normal

word-break: break-all;

word-break: break-all

word-break: keep-all;

word-break: keep-all

overflow-wrap

overflow-wrap 屬性的作用是告訴瀏覽器,如果詞斷行後的結果還是會溢出容器元素,該如何處理。

  • normal:預設值,如果文字太長,可能會溢出容器元素。
  • break-word:如果文字太長,沒辦法裝進容器元素裡,允許文字在任意位置斷行。

範例如下:

word-wrap: normal;

word-wrap: normal

word-wrap: break-word;

word-wrap: break-word

word-wrap

word-wrap 其實就是 overflow-wrap 的別名。

結論

一般來說 CJK 的內容不太需要特別處理斷行的問題,另外使用 word-break: break-all 也容易讓過多的英文單詞斷在中間,造成閱讀不適。因此大部分的情況 overflow-wrap: break-all 應該就很夠用了。

參考資料

overflow-wrap - MDN

overflow-wrap - CSS Tricks

word-break - MDN

word-break - CSS Tricks

[css] word-break、word-wrap(overflow-wrap) 及 white-space 的差別與用法


Profile picture

Shubo Chao 軟體工程師, 喜歡研究前端效能優化等議題