CSS3 文本換行

文本換行實際上是個很是經常使用但並不起眼的特性。你什麼都不用設，瀏覽器自動就會換行。例如英語，瀏覽器會根據容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇在文字或標點符號處換行。但有時遇到長單詞或URL瀏覽器就沒這麼智能了，會出現撐破容器的現象，很難看，以下圖

容器定寬150px的前提下，普通文字如左圖瀏覽器足以勝任自動換行，右圖碰見長單詞或URL，瀏覽器就力不從心了。固然，你能爲容器設置overflow:auto;，讓滾動條出現，以免撐破容器。或乾脆overflow:hidden;讓超出部分隱藏，見下圖

但總感受overflow不太理想，應該有換行專用的屬性。本篇就介紹一下3種換行的屬性

word-wrap
word-break
white-space
word-wrap
word-wrap能實現斷詞換行。可設normal，break-word。默認值normal等於沒設，不贅述。break-word容許斷詞換行。如右圖設了word-wrap: break-word;後，瀏覽器的執行過程：發現長單詞顯示不下，根據默認的換行規則，用半角空格換行，所以Ooops too後面空出了一段空白，長單詞移到第二行發現仍舊顯示不下，因而斷詞換行，長單詞和URL所以被中間截斷。

word-break
word-break能夠設置瀏覽器自動換行的方式。可設normal，break-all，keep-all。默認值normal等於沒設，不贅述。break-all將瀏覽器的換行模式設爲根據容器尺寸容許斷詞換行。和上面word-wrap: break-word;有什麼區別呢？看下圖，藍線部分。

左圖word-wrap的break-word是沿用瀏覽器默認的換行方式，所以「Ooops too」後面空出了一段空白，上面有解釋，不贅述。右圖word-break的break-all是改變瀏覽器默認的換行方式，讓瀏覽器無視半角空格，直接根據容器尺寸換行，所以遇到長單詞時，直接斷詞換行。效果上看word-break: break-all;比word-wrap: break-word;更節省頁面空間。

keep-all不容許斷詞，在英語系狀況下等同於normal，等同於沒有設。在中日韓文狀況下，normal和keep-all有區別，見下圖

中日韓文狀況下，normal仍舊等於沒有設，瀏覽器選擇在文字或標點符號處換行。但設成keep-all後，將再也不容許斷詞（哪怕是中日韓文），只能像英語系同樣根據半角空格或標點來換行。
white-space

white-space設置空白符和換行符。可設默認值normal，可設pre， nowrap，pre-line，pre-wrap。效果見下圖

<div style="white-space: xxx;"> //xxx替換相應的值
Ooops too loooooooooooooooooooooong!

首先勝出四場的球隊將得到NBA總冠軍。
</div>
normal，瀏覽器默認會忽略多餘空白符（要想顯示多個空白符，請用 代替空格鍵）和換行符。

pre會保留空白符和換行符，至關於<pre>標籤。要消除第一行這個換行符，常見在HTML端改爲下面這樣以便去掉多餘空行

<div style="white-space: pre;">Ooops too loooooooooooooooooooooong!
首先勝出四場的球隊將得到NBA總冠軍。
</div>

//或者

<div style="white-space: pre;"><!-- 
--> Ooops too loooooooooooooooooooooong!
首先勝出四場的球隊將得到NBA總冠軍。
</div>
nowrap和normal的區別是，它不會自動換行。當你用text-overflow屬性時須要配合white-space: nowrap;和overflow: hidden;才能起做用

pre-line會忽略多餘空白符（要想顯示多個空白符，請用 代替空格鍵），但保留換行符，會自動換行

pre-wrap和pre-line的區別是，它會保留多餘空白符

總結
<pre>標籤裏展現源代碼時，遇到有url屬性時會很長，致使撐破頁面（尤爲是移動端），能夠用white-space: pre-wrap;加上word-wrap: break-word;

<pre>標籤外常見的強制換行方式是overflow:hidden;加上word-wrap: break-word;

強制不換行能夠white-space: nowrap;加上word-break: keep-all;