【重拾基礎】回味無窮的CSS屬性white-space

《回味無窮的CSS屬性white-space》，本文說的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屬性值

總結

能夠從幾個方面來對比下這幾種屬性值的差別。

	是否正常換行	是否合併連續空白符	換行符是否有效
normal	是	是	否
pre	否	否	是
nowrap	否	是	否
pre-wrap	是	否	是
pre-line	是	是	是

媽呀，仍是挺難記的，多多複習！

首發連接

---

掃一掃下方小程序碼或搜索Tusi博客，即刻閱讀最新文章！