本文說的white-space是一個控制換行和空白處理的CSS屬性。我曾經被這個屬性煩死，一直沒記住，今天決定還是寫下來好好琢磨下。

屬性值

normal

默認值，正常換行，空白和換行符會被瀏覽器忽略。啥意思呢？

正常換行的意思是，單詞間會正常換行，如果下一個單詞太長，不足以在當前行剩余部分完整展示，則會在下一行顯示。哪些情況算一個單詞呢？

一個中文字

一個英文單詞

// 這是兩個單詞
Tusi Blog
// 這只算一個單詞
TusiBlog

連續的數字或符號也只算一個單詞

// 這只算一個單詞，如果超長也不會換行，會擠出橫向滾動條
10000000000000000000000+2000000000000000000*200000000000000

空白和換行符會被瀏覽器忽略。就是你輸入連續的空格，只會表現出一個空格的效果；如果敲了回車，也不會換行。

<!-- 代碼 -->
<div>00000000 00000000000000000></div>
<!-- 實際效果 -->
00000000 00000000000000000

pre

行為方式類似HTML中的pre標簽。pre標簽一般用來包裹源代碼。

不會自動換行（想想，你寫代碼時，不回車會換行嗎？），除非在文本中遇到換行符（敲了回車）或使用了br標簽。

空白會被瀏覽器保留。意思就是連續的空格會被保留，不會合并成一個。

nowrap

• 不換行，內容再多也不換行。
• 忽略換行符，也就是說回車也不會換行，直到遇到br標簽為止。

pre-wrap

• 正常換行
• 連續的空白符會被保留
• 換行符（回車）也是有效的

pre-line

• 正常換行
• 連續空白符會被合并成一個
• 換行符（回車）也有效

inherit

繼承父元素的white-space屬性值

總結

可以從幾個方面來對比下這幾種屬性值的差異。