切版練習室 ♦ 終於搞懂overflow-wrap(word-wrap)、word-break、white-space怎麼用了
本篇將重點介紹「overflow-wrap(word-wrap)、word-break、white-space」的用法
你是不是跟我一樣，傻傻搞不清楚「overflow-wrap(word-wrap)、word-break、white-space」這三個CSS屬性的差別與用法呢？
今天我們一起來搞懂他們吧！
文本總是會有字數過多而超出範圍的時候，通常文字最多到外容器的最末端之後就會換行，例如寬度如可容納10個字，那第11個字開始就會自動換行，第21個字、第31個字以此類推…。
但文本換行會遇到「空白」和「斷詞」的問題，今天就是要探討與之相關的CSS屬性：
㊀ word-break
顧名思義，就是「斷詞」，但之所以要斷詞，是因為文本過長時需要換行，而換行顯示時，非CJK字體就會遇到要斷詞的問題。
CJK字體&表意語言
在這裡要先提到CJK字體，CJK指的分別是中文Chinese、日文Japanese、韓文Korean三種使用漢字或其變體的語言，以及非CJK字體，例如英文、西歐文字等，這兩者間的區別。
CJK字體被稱為表意語言，因為每個「字」有其表示意義，例如：「書籍」二字是指「書本冊籍的總稱」，將書籍二字分開來看，「書」也指「有文字或圖畫的冊子。」，「籍」這個字本身也有「書冊」的意思。
非CJK字體，則以英文代表來說，「BOOK」這個單字或詞，是指「書」的意思，但是將B-O-O-K分別差開來看的時候，這些字母本身沒有意義。
所以如果是以CJK字體為文本，在任何時候斷字換行，在閱讀上並沒有很大的影響，因為CJK的單字本身就可以分開代表一個意思，即便把「書籍」二字拆開分行表示，閱讀上也不會太難理解。
非CJK文本的問題
本文重點非探討CJK字體，所以以下會簡單以「中文」代表大多數CJK表意語言，以英文表示非CJK。
然而，如英文文本會遇到的問題，包括行內最後一個單字過長，無法完整顯示需要換行，或單字本身就長於外容器寬度，這時候不只是要換行，也需要斷詞來顯示（參考下圖）。
word-break的屬性值
word-break屬性就是用來解決以上問題而使用，它的屬性值主要有三個：normal、break-all、keep-all
①normal
預設值，中英文皆會自動換行，但不會將「詞」拆開顯示，文本過長時，會保留完整的詞彙，並換行顯示。
文本可能會有留白，看起來參差不齊。
②break-all
任意斷行，也就是不考慮詞的完整性，在文本過長時會將詞拆開換行顯示。
可用來保持文本視覺上的整齊性，但英文單字被拆開不易閱讀。
③keep-all
保留「詞」的完整性來斷行。
但中文文本，無法判斷何謂「詞」（因為每個字單獨都可以代表一個詞，合併也可為詞），所以不會斷行。
另外，英文文本的單字過長，本身就超出文本容器範圍的話，也不會斷詞換行。
㊁ overflow-wrap(word-wrap)
關於overflow-wrap與word-wrap，參考MDN的注釋：
以上提供參考，因此本篇不再討論word-wrap，只討論overflow-wrap的用法。
overflow-wrap比起word-break更集中在討論要不要「斷詞」這件事，而非換行。overflow就是溢出的意思，指的是單文本中的詞本身長度大於文本容器，無法是否換行顯示都會溢出文本範圍，因此透過overflow-wrap屬性來決定這樣的詞是否要拆開來顯示。
①normal
預設值，會在正常情況下讓文本換行，所以中英文皆會換行，但文本內過長的詞，並不會斷詞來顯示。
②break-work
強制斷詞，也就是過長的詞就會被拆開換行顯示。
㊂ white-space
white-space屬性主要用來指定如何處理文本中的空白字元。
主要有五種屬性值normal、nowrap、pre、pre-line、pre-wrap，用法與說明如下：
①normal
多個空白會合併為1個空白，並自動換行。
換行字元也被視為一個空白，與pre-line不同。
②nowrap
同normal會合併空白，但強制不換行。
③pre
保留所有空白，不會自動換行。
④pre-line
空白會自動合併，超出範圍會自動換行。
⑤pre-wrap
不會合併多個空白，超出範圍會自動換行。
關於white-space的用法最複雜，所以建議搭配程式碼對照更能瞭解。
可以參考範例 https://codepen.io/htmlcss_room/pen/poNKrZz
