CSS word-break

一、CSS word-break的作用

CSS word-break屬性定義了在哪個點斷開連續的字符定義。該屬性可用於中文、日文和韓文等語言，同時也適用於其他語言如英語、法語等。

word-break 有兩種常用的屬性值。

.word-breek{
  word-break: break-all;
  word-break: keep-all;
}

break-all：表示允許字符串在單詞內斷開，在字符之後斷開，默認情況下，文本斷行規則在兩端是不允許斷詞的；

keep-all：表示不允許字符串在單詞中間斷開。只有在東亞的語言（CJK，即中文，日文，韓文）中使用這個值是有意義的。

二、word-break和中文排版的問題

在使用CSS排版中文的時候，我們通常會遇到以下問題：

中文字符長度比英文字符長度長，一個中文字符通常有2個英文字符那麼長；微軟雅黑等中文字體通常比博客英文字體長。這就導致了如果不特殊處理，排版結果就會出現中英混排的時候，出現一些難看、頓挫不流暢的字符間隔。

在這種情況下，word-break屬性就派上了用場。如果將word-break屬性設置為break-all，那麼在遇到中文字符之處，就會將整個字符單獨放一行顯示，從而解決了中英混排出現字符難看的問題。

.demo{
  word-break: break-all;
}

三、其他用途

除了上述情況，word-break在其他方面也有許多用途。比如：

適用於單詞過長，溢出父容器，建議使用hyphens和word-break,之前我們學習了hyphens就是為了處理在中英文字混雜的文本中，單詞太長導致的單詞會溢出父容器的問題了，但是hyphens有一些局限性，word-break就能起到完美解決。在設置word-break為break-all的情況下，長單詞將被平均拆分，以適應帶有最小高度的容器。

.demo{
  width: 200px;
  word-break: break-all;
}

在英語、法語等語言中，我們知道連字符（-）常被用於單詞的分隔符。但是在中文、日語、韓語等語言中，連字符並不是常見的分隔符，那麼不加斷行會導致詞距與句子較大，使用 word-break 包括 break-all 和 keep-all 都可幫助實現連字正常排布。

.demo{
  width: 200px;
  word-break: break-all;
  text-align: justify;
  text-align-last: justify;
}

四、Word-break的兼容性

word-break為CSS3屬性，IE6-11和Safari 9以下的版本都不支持word-break: break-all

需要注意的是，在蘋果操作系統中，如果有OSX用戶自定義的等寬中文編碼存在，word-break: keep-all;將會失效且不能包裝空白。