進行網頁排版時，常會遇到「需要文字換行」或「不想要文字換行」的狀況，這個單元會介紹 CSS 裡控制換行的樣式屬性 word-break、line-break、overflow-wrap ( word-wrap )，以及換行時使用 hyphens 產生「連字號」或 hyphenate-character 替換連字號，運用這些換行有關的樣式屬性，精準的控制文字換行。

影片重點：

• 00:00:55 認識硬換行、軟換行
• 00:02:13 word-break 文字換行方式
• 00:04:29 line-break ( CJK 中日韓 ) 文字的換行方式
• 00:07:32 overflow-wrap ( word-wrap ) 單字中的換行方式
• 00:09:36 hyphens 連字號
• 00:11:38 hyphenate-character 自訂換行符號
• 00:12:45 text-wrap 美化排版的換行方式

相關參考：

• 教學文：CSS 文字換行
• 影片連結：https://www.youtube.com/watch?v=ciFK-3p87jk

後記

關於 CSS 的文字換行，我在多年前也有寫過，但這次再寫一次又發現許多當初沒有注意到的細節，而且換行算是進行排版時滿常遇到的樣式，大家可以參考看看呦～

題外話，每次想到換行我就會想到空手道打斷木板的畫面，所以就用 AI 做了同樣的封面ㄎㄎ～

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html