本文同步至微信公眾號：http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c986e61708da0027fac035ad36f0f#rd 對於後續文章感興趣的可以添加關註： 文中有些地方沒顯示全，查看
本文同步至微信公眾號：http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c986e61708da0027fac035ad36f0f#rd
對於後續文章感興趣的可以添加關註：
文中有些地方沒顯示全，查看全部內容，請點擊上面的原文鏈接哈
在對頁面內容進行排版的時候，不可避免的會遇到對文本進行處理的問題。今天整理了文本換行相關的內容，記錄下來分享之。畢竟，好記性不如爛筆頭嘛。
對於文本換行，自己之前也處理過相關的問題。知道要用到word-wrap,word-break和white-space等相關的樣式規則。然而對於它們三個之前到底有什麼區別，還說不清楚。本著理論與實踐相結合實事求是的原則，今天抽時間看了下。
在mozilla官網上搜word-wrap會得到如下解釋：
The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
word-break的解釋：
The word-break CSS property is used to specify whether to break lines within words.
word-wrap 屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字元串太長而找不到它的自然斷句點時而出現溢出包含框的現象。
word-break表明怎樣進行單詞內的斷句。
從字面意思來看這兩個都是用來對文本進行換行的，那麼這兩個到底有什麼區別呢？我們來看一下官網上給出的例子。
首先看一下word-wrap的語法：
word-wrap: normal;word-wrap: break-word;
p { width: 13em; background: gold; }
當指定word-wrap:normal（預設值）時，我們看到Fernstraßenbauprivatfinanzierungsgesetzesund 這串單詞很長des後面的位置顯示不下，它會換一行顯示，而且還從它的容器中溢出了。
p { width: 13em; background: gold; word-wrap: break-word; }當我們給p元素加上樣式word-wrap:break-word時運行結果如下圖：
我們看到Fernstraßenbauprivatfinanzierungsgesetzesund這麼一長串仍然會換到下一行顯示，當下一行的寬度仍然不夠顯示的時候，他就會換行顯示。官網上給的break-word的解釋是Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.個人的理解是，對於普通的文本，當容器剩餘的空間不足以顯示的時候，它可以在任意的地方被截斷（換行顯示）.
接下來在看看官網上給出的word-break的例子：
word-break的語法：
word-break: normal;
word-break: break-all;
word-break: keep-all;再來看下麵的三個實例：
.narrow {
padding: 5px;
border: 1px solid;
width: 8em;}
<p>1. <code>word-break: normal</code></p><p class="normal narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王國で本當に大きな言葉 </p>.normal {
word-break: normal;}運行結果如下圖：
word-break:normal Use the default line break rule.也就是也就是單詞過長時不換行，超出的部分溢出。
再來看word-break: break-all
<p>2. <code>word-break: break-all</code></p><p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王國で本當に大きな言葉 </p>.breakAll {
word-break: break-all;}運行結果如下圖：
break-all:Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.單詞可能在任何位置被截斷（中文，日文和韓文除外）
上文中有提到word-wrap：break-word也是對文本進行截斷處理。它兩的區別就在於break-word對於長文本會換到下一行進行顯示，如果下一行也顯示不完則進行換行。而break-all對於長文本不會換到下一行，直接在當前行截斷顯示（如上圖）
那麼word-break:keep-all的作用呢？我們知道對於中文，日語，北韓文不會出現像英文單詞那樣出現一個很長很長的串。對於CJK來說預設的就是換行顯示的比如：
<p class="narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王國で本當に大きな言葉</p>這段文字它的運行效果如下圖：
但有時候我們可能會碰到這樣的需求，對於中文不讓它進行換行，在同一行進行顯示，這時候就是keep-all出場的時候了。在上圖的例子的基礎上，加上word-break:keep-all之後的顯示效果如下圖：
加上word-break:keep-all之後，圖中的日文(沒學過島國語言，姑且這麼稱呼吧)就在同一行進行顯示了。
keep-all:Don't allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.這個是官網對這一條規則的解釋。對於cjk文本，不允許換行顯示。
以上(word-wrap，word-break)就是css中對於文本換行相關的處理。接下來在來看一下white-space.
官網上對於white-space的解釋是white-space CSS 屬性是用來描述如何處理元素中的空格。
white-space: normal
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-linenormal
-
連續的空白符會被合併，換行符會被當作空白符來處理。填充line盒子時，必要的話會換行。這就是預設我們所看到的。
nowrap
和 normal 一樣，連續的空白符會被合併。但文本內的換行無效。當我們不想讓文本進行換行顯示時，使用white-space:nowrap時也管用的原因就在於此。
pre
連續的空白符會被保留。在遇到換行符或者<br>元素時才會換行。
有的時候，我們為了防止文本溢出，需要對於超出包含框的文本做隱藏或換行處理。也有的時候，我們又有這樣的需求，不讓文本進行換行。以上是整理了我根據平時工作中遇到的文本換行相關的一些問題及處理方式的分析。。文中所提到的官網均只mozilla官網。如果文中有不對的地方或者您還有其他的好的方法處理文本換行，歡迎一起討論哈。
