CSS換行語法 學習筆記


Posted by m6fish on 2020-12-20

整理很常遇到的換行語法

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

資源

範例

試驗程式


語法&效果

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


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 處理空白的換行行為

#css







Related Posts

《鳥哥 Linux 私房菜:基礎篇》Chapter 02 - 主機規劃與磁碟分割

《鳥哥 Linux 私房菜:基礎篇》Chapter 02 - 主機規劃與磁碟分割

webpack 新手教學之淺談模組化與 snowpack

webpack 新手教學之淺談模組化與 snowpack

[進階 js 02]  賦值

[進階 js 02] 賦值


Comments