本文說的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

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

電腦刺繡繡花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com

inherit

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

總結

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