文本換行其實是個非常常用但并不起眼的特性。你什么都不用設，瀏覽器自動就會換行。例如英語，瀏覽器會根據容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇在文字或標點符號處換行。但有時遇到長單詞或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;有什么區別呢？看下圖，藍線部分。

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!<br>
首先勝出四場的球隊將獲得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;