Skip to content

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

Published: at 12:47 PM (2 min read)

剛開始常分不清楚 CSS 中的 word-break、word-wrap 及 white-space

利用這篇釐清這幾個的用法與差別


  1. word-break:決定如何斷行單詞。 normal 瀏覽器預設的單詞斷行,可以看到英文會以詞斷行(不會將原詞切斷),中文則是以字斷行。 break-all 讓非CJK(Chinese、Japanese、Korean)語言的文字,任意斷行(以字斷行)。 keep-all 用詞斷行。 例:
  1. word-wrap:當詞斷行後的結果 overflow時,要如何處理 normal 保持在同一行 break-word 切斷詞並換行。 PS. 設定 word-break: break-all; 就不會 overflow,因此 word-wrap 並不會起作用。 例:
  1. white-space:決定如何處理元素中的空白字元及斷行。 normal 預設連續空白時瀏覽器會忽略空白(還會省略開頭多餘的空白),只會視為一個,若 overflow 則自動換行。 nowrap 直到遇到
    之前都不換行,就算你再設定 word-wrap: break-word; 也不會換行。 pre 依原空白字元及排版顯示,overflow 仍不換行。 pre-wrap 保留原排版及空白字元,在 overflow時會自動換行 pre-line 保留原排版,會合併多餘的空白,overflow 自動換行。 未命名 PS. 詳細請看參考資料之網址 例:

參考資料:

http://abgne.tw/css/css3-lab/css3-word-break.html

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space