強制文字換行－CSS的word-break

之前我們介紹了CSS的word-wrap，此屬性可以讓過長文字直接換至下一行，使得文字不會超出div區塊的範圍。

而CSS還有另一個相似的屬性為word-break，功能也是讓文字換行，那麼此兩項屬性有什麼差別呢？就讓我們來看以下範例吧。

延續上次的範例介紹的word-wrap，可以讓過長文字換行如下：

原本過長會直接超出範圍

 使用word-wrap:break-word，可以使過長的design單字直接換行

但是可以發現的是，由於整行design文字換行的關係，使得「e-work」這段文字右邊留下很大一片空白，除了顯得有些浪費空間以外，看起來也較不整齊，視覺上就沒那麼美觀了。

因此，為了解決此一問題，我們可以使用CSS的word-break屬性。

設定值有：

normal：瀏覽器的預設規則

break-all：可以在單字的字母之間換行，不一定要完整單字才能換行。

keep-all：不可以在單字的字母之間換行，必須保留完整單字，比如說遇到半形的空格才可換行。

範例：

可以發現，e-work右邊的空間被填滿了！但缺點是，若是一個完整的單字被強制斷行，可能會失去該單字的易讀性，使得閱覽者不清楚此單字或是誤以為是兩個分開的單字，所以在使用上須斟酌一下。