文字處理之換行及word break和word wrap屬性詳解

上一篇博客中介紹white-space屬性時聊到了換行，這一篇介紹換行的細節。

瀏覽器的默認行爲

瀏覽器的換行行爲，對於中文和英文存在一些差異。

中文換行

正如上一篇博客中所說的，中文換行比較簡單，這一行放不下就換行。除了中文以外，韓文和日文的處理也是同樣的。這三種文字合在一塊兒就是MDN介紹word-break屬性時所說的CJK（Chinese, Japanese, Korean的縮寫）。

英文換行

來到英文，狀況就要複雜一些。在英文中有單詞的概念，因此在換行時就得考慮單詞的完整性。

1. 瀏覽器按照空格來識別單詞，默認狀況下，瀏覽器不會在單詞內換行

   <p> thisisalonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword</p>
   複製代碼

   咱們在p標籤內部放了一些英文字母，這些字母之間並無用空格來分隔開來，這就像文言文沒有用標點符號斷句同樣。因此，就如同你看不懂沒有斷句的文言文，瀏覽器也看不懂沒有用空格分隔的英文。因而瀏覽器在處理時，就會把這一長串英文只是當成一個很長很長的單詞，只有一個單詞也就不會換行，由於默認的換行只會在單詞之間。

2. 當一行放不下時，瀏覽器會嘗試把最後一個單詞放到下一行，若是下面這一整個空行仍是放不下這個單詞，那麼就會任由這個單詞超出容器，反正默認狀況下瀏覽器是不會把單詞拆開的。

   <p> this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword</p>
   複製代碼

   最後顯示時，就會把後面這個長單詞放到下一行，而後任由其超出容器：

word-break屬性

從上面的兩點看到，瀏覽器已經在很努力的換行，從而儘可能讓文字不要超出容器了。但即便是這樣，對於較小的容器中存放的長單詞，當整個一行還放不下一個單詞是，瀏覽器也是無能爲力，畢竟瀏覽器要保證單詞的完整性，不敢隨隨便便把一個單詞給拆了。可是，word-break屬性就賦予了瀏覽器拆單詞的權力。

1. word-break:normal：這是默認值，也就是瀏覽器的默認行爲

2. word-break:break-all：能把all都break掉，全部的東西都能拆，因此，單詞隨便拆

   <p style="word-break:break-all">this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword</p>
   複製代碼

   這樣瀏覽器在排版時，就徹底能夠把字母當成拆分單位，一個字母一個字母的往上放，放不下時就把字母放到下一行。能夠理解成，此時就沒有單詞的概念了，只有字母。

3. word-break:keep-all：上面在介紹瀏覽器的默認行爲時，CJK字符和英文是分開，之因此這樣，是由於word-break屬性對於中英文的行爲也是分開的。上面介紹的break-all值，主要也是針對英文的，漢字仍是按照瀏覽器的默認行爲，裝不下就換行。對於中文來講，沒有拆分不拆分，只有換行不換行。keep-all就是讓中文不要換行，此時英文仍是按照瀏覽器的默認行爲來。

   <p style="word-break:keep-all">this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword 這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文</p>
   複製代碼

   注意這裏我在中英文之間加了個空格，不然瀏覽器會把後面的中文頁當成是英文單詞的一部分。最後顯示時，英文仍是按照默認行爲，中文變成了不換行。

4. word-break:break-word：在MDN上，只會介紹前面三個屬性，由於只有前三個纔是標準的，而break-word是非標準的。若是必定要使用這個值，就須要注意下瀏覽器的兼容性，其最後顯示的效果，跟下面介紹的word-wrap:break-word基本一致，這裏再也不多說，看下面吧。

word-wrap屬性

word-break:break-all在拆英文單詞時，細看一下，當longlonglon...longword這個單詞在第一行末尾放不下時，實際上是分了兩步：

1. 以字母爲單位處理，儘可能將這個長單詞的字母往第一行放，能放多少放多少
2. 後面連單個字母都放不下時，再換行，放其餘字母。

而word-wrap:break-word則不一樣，他會首先直接換行，放單詞，第二行放不下，再拆單詞

<p style="word-break:break-word">this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword</p>
複製代碼

與上面的word-break:break-all的圖對比一下就明白了，拆單詞也是拆單詞，只不過我先換到下一行再拆。

另外一個屬性值是word-wrap:normal，這就是默認值，對應瀏覽器的默認行爲。

word-break與word-wrap很容易弄混，因此在CSS3中，word-wrap已經改爲了overflow-wrap，不過考慮兼容性，仍是用word-wrap的比較多。

總結一下

word-break:break-all與word-wrap:break-word這兩個屬性，都是考慮拆英文長單詞的，可是拆分的方法有點不同。另外word-break:keep-all還能夠控制中文。其實想一想，仍是中文的事少，沒有拆分的顧慮，只用考慮換行不換行就能夠了。