本文說的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屬性值
總結
可以從幾個方面來對比下這幾種屬性值的差異。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/274292.html
微信掃一掃 
支付寶掃一掃 