p標籤中插入一段文字，是非常常見的需求，但是自習分析，這裏面有很多需要注意的細節。這篇和下篇博客，主要講對於文本內容顯示的處理，這篇主要介紹空白字符和white-space屬性。
瀏覽器的默認行爲
瀏覽器支持4種空白字符：空格、製表符、回車、換行。默認情況下，有以下幾點：
-
所有的空白字符，都會當成空格處理
<p>Hello World</p>hello world之間加了一個換行符，但是最後顯示的效果如下：
插入的是換行符，但是最後顯示的時候變成了空格。這也就說明，如果我們有兩段文字，在一個p標籤內並不會保留換行符。要想實現換行效果，要麼用兩個p標籤，要麼用
<br/>來換行。 -
頭尾的空白符會直接忽略
<p> hello world </p>在頭部和尾部都有空格，但最後顯示時，兩邊的空格會直接忽略。如果頭尾是換行，也會被忽略掉。爲什麼要這樣做呢，比如我們寫代碼的時候，爲了結構清晰通常喜歡排版一下：
<p><!-- 這裏有第一個換行符 --> <span>hello <!-- hello前後加空格也會被忽略 --></span><!-- 這裏的換行符會被當成空格 --> <span><!-- world前後加空格也會被忽略 --> world</span><!-- 這裏有第二個換行符 --> </p>最後的顯示效果如下：
p標籤內部首尾的兩個換行符都會直接忽略，使得我們排版帶來的空白字符就不會影響最後顯示的效果。span標籤內部首尾的空格也會被忽略，所以，不要指望在span包裹的hello之後和world之前加入空格來增加兩者間距。
-
多個空格會被合併
這一點應該比較熟悉，我在hello和world之間插入100個空格，也只會顯示一個而已。那麼如果我想插入多個空格呢，就只能用到字符實體這種東西了，也就是
。<p>Hello World</p> <p>Hello World</p>
white-space屬性
瀏覽器的這種默認行爲，爲我們提供了很多便利，也符合我們的日常需求，比如代碼的排版不會對展示產生過多影響。但是，這種默認行爲也並不總是符合我們的需求。如果需要改變，可以通過white-space屬性來實現，顧名思義，這個屬性就是控制空白字符的，同時，他也會對瀏覽器的默認換行行爲有一些影響。
-
white-space:normal，這是默認值，也就是瀏覽器的默認行爲。除了上面提到的空白字符的處理外，當文字在一行放不下時，瀏覽器還會自動換行。關於換行的具體細節在下一篇博客介紹，這裏我們簡單點，只考慮中文字符，字數多了放不下就換一行。<p>文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多</p>最後顯示的效果如下：
-
white-space:nowrap：所謂wrap，翻譯成中文就是包裹，在CSS裏面，我們可以理解成當一行放不下時，爲了讓他不超出容器，瀏覽器就要給文字換行，將文字包裹起來。那麼nowrap就是不包裹，也就是文字超出就超出吧。<p style="white-space:nowrap">文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多</p>最後顯示的效果如下：
-
white-space:pre：我希望我寫的格式就是最終展示的瀏覽器，瀏覽器不做任何處理，那就用這個值，或者用<pre>標籤也一樣的效果<p style="white-space:pre"> 文字有點多文字有點多 文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多 文字有點多文字有點多文字有點多文字有點多文字有點多</p>最後顯示的效果如下：
我在開頭加的空格沒有被忽略，中間加的換行符也沒有被當成空格，甚至多個換行符也沒有被合併，第二行超長了也沒有自動換行。總之，瀏覽器沒有做任何處理。
-
white-space:pre-wrap：pre的效果看來有點太粗暴了，我還需要wrap包裹一些，也就是在pre的基礎上希望自動換行。<p style="white-space:pre-wrap"> 文字有點多文字有點多 文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多 文字有點多文字有點多文字有點多文字有點多文字有點多</p>最後顯示的效果如下：
-
white-space:pre-line：line是一行的意思，加上line代表我更加強調換行，所以我就保留換行符，並且保留瀏覽器的wrap換行，這兩個都是跟換行相關的。空格還是該合併合併，該忽略忽略，不跟pre一樣搞了。<p style="white-space:pre-line"> 文字有點多文字有點多 文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多 文字有點多文字有點多文字有點多文字有點多文字有點多</p>最後顯示的效果如下：
總結一下
這個屬性其實控制的是三點：
- 換行符是否當成空格處理
- 多個空格是否合併，收尾空格是否忽略
- 是否自動換行
每個屬性對應的行爲也就是下面的表
| 換行符 | 空格符的合併及忽略 | 自動換行 | |
|---|---|---|---|
| normal | 當成空格，並且合併 | 合併 | 是 |
| nowrap | 當成空格，並且合併 | 合併 | 否 |
| pre | 保留 | 保留 | 否 |
| pre-wrap | 保留 | 保留 | 是 |
| pre-line | 保留 | 合併 | 是 |
關於換行，也還是有很多細節的，下一篇詳聊~