剛開始常分不清楚 CSS 中的 word-break、word-wrap 及 white-space
利用這篇釐清這幾個的用法與差別
- word-break:決定如何斷行單詞。
normal 瀏覽器預設的單詞斷行,可以看到英文會以詞斷行(不會將原詞切斷),中文則是以字斷行。
break-all 讓非CJK(Chinese、Japanese、Korean)語言的文字,任意斷行(以字斷行)。
keep-all 用詞斷行。
例: - word-wrap:當詞斷行後的結果 overflow時,要如何處理
normal 保持在同一行
break-word 切斷詞並換行。
PS. 設定 word-break: break-all; 就不會 overflow,因此 word-wrap 並不會起作用。
例: - white-space:決定如何處理元素中的空白字元及斷行。
normal 預設連續空白時瀏覽器會忽略空白(還會省略開頭多餘的空白),只會視為一個,若 overflow 則自動換行。
nowrap 直到遇到 <br /> 之前都不換行,就算你再設定 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
1 Comment-
Pingback: [CSS] word-break、overflow-wrap(word-wrap) 及 white-space 的差別與用法 – 五花八門工作誌