CSS換行語法 學習筆記

整理很常遇到的換行語法

圖片來源: https://css-tricks.com/css-is-awesome/
banner: Photo by sylvie charron on Unsplash

資源

• 鉄人28号FX　鉄人14号「空白彈」white-space, word-break, overflow-wrap
• css文本换行总结
• CSS overflow-wrap新属性值anywhere是干嘛用的？
• stackoverflow: What does “anywhere” mean in “word-wrap” css property?

範例

試驗程式

語法&效果

以下效果預覽圖均出自MDN，推薦跟範例程式一起查閱

• MDN - word-break
• MDN - overflow-wrap
• MDN - white-space

word-break: normal

• 預設值
• 空格 & CJK 換行，其他不換行
  CJK = 中文/日文/韓文

word-break: break-all

• 碰到邊界換行 (注意換行符號沒有生效)

word-break: keep-all

• 空格換行
• 單詞長字不切斷

word-break: break-word

注意: MDN 不推薦使用

• 空格 & CJK換行
• 單詞長字會被折斷
• 相當於 word-break: normal + overflow-wrap: anywhere

overflow-wrap: normal

overflow-wrap 這個屬性舊稱 word-wrap

• 預設值
• 空格換行
• 單詞長字不切斷

overflow-wrap: anywhere

注意: safari 還不支持

• 空格換行
• 長字切斷

能換行就換行

overflow-wrap: break-word

• 空格換行
• 長字切斷

能換行就換行

anywhere vs break-word

正常狀況下會一樣，但 anywhere 在最小尺寸下會考慮換行，而break-work不會

overflow-wrap: anywhere 相當於 word-break:break-all + word-break: break-all

white-space: normal

• 預設值
• 連續空白合併
• 空間不足時，空白換行

white-space: nowrap

• 連續空白合併
• 不換行

white-space: pre

• 保留連續空白
• 遇到<br>或者換行符號(\n)才換行

white-space: pre-wrap

• 保留連續空白
• 空間不足時，空白換行
• 遇到<br>或者換行符號(\n)換行

white-space: pre-line

跟 pre-wrap 很像，差別在於空白有合併

• 連續空白合併
• 空間不足時，空白換行
• 遇到<br>或者換行符號(\n)換行

white-space: break-spaces

注意: FireFox Android 不支援
跟 pre-wrap 很像，差別在於行尾空白會保留&影響最小尺寸

• 保留連續空白
• 空間不足時，空白換行
• 遇到<br>或者換行符號(\n)換行

總結

看起來好像能理解，但是組合起來都不認識

從CSS字面上來解讀:

• word-break 處理文字本身的換行行為
• overflow-wrap 處理文字溢出時的換行(ex: 單詞長字)
• white-space 處理空白的換行行為