文字處理之空白字符及white space屬性詳解

p標籤中插入一段文字，是很是常見的需求，可是仔細分析，這裏面有不少須要注意的細節。這篇和下篇博客，主要講對於文本內容顯示的處理，這篇主要介紹空白字符和white-space屬性。

瀏覽器的默認行爲

瀏覽器支持4種空白字符：空格、製表符、回車、換行。默認狀況下，有如下幾點：

1. 全部的空白字符，都會當成空格處理

   <p>Hello 
     World</p>
   複製代碼

   hello world之間加了一個換行符，可是最後顯示的效果以下：

插入的是換行符，可是最後顯示的時候變成了空格。這也就說明，若是咱們有兩段文字，在一個p標籤內並不會保留換行符。要想實現換行效果，要麼用兩個p標籤，要麼用<br/>來換行。

2. 頭尾的空白符會直接忽略

   <p>  hello  world  </p>
   複製代碼

   在頭部和尾部都有空格，但最後顯示時，兩邊的空格會直接忽略。若是頭尾是換行，也會被忽略掉。爲何要這樣作呢，好比咱們寫代碼的時候，爲告終構清晰一般喜歡排版一下：

   <p><!-- 這裏有第一個換行符 -->
      <span>hello <!-- hello先後加空格也會被忽略 --></span><!-- 這裏的換行符會被當成空格 -->
      <span><!-- world先後加空格也會被忽略 --> world</span><!-- 這裏有第二個換行符 -->
   </p>
   複製代碼

   最後的顯示效果以下：

p標籤內部首尾的兩個換行符都會直接忽略，使得咱們排版帶來的空白字符就不會影響最後顯示的效果。span標籤內部首尾的空格也會被忽略，因此，不要期望在span包裹的hello以後和world以前加入空格來增長二者間距。

3. 多個空格會被合併

   這一點應該比較熟悉，我在hello和world之間插入100個空格，也只會顯示一個而已。那麼若是我想插入多個空格呢，就只能用到字符實體這種東西了，也就是 。

   <p>Hello      World</p>
   <p>Hello &nbsp;&nbsp;&nbsp; World</p>
   複製代碼

white-space屬性

瀏覽器的這種默認行爲，爲咱們提供了不少便利，也符合咱們的平常需求，好比代碼的排版不會對展現產生過多影響。可是，這種默認行爲也並不老是符合咱們的需求。若是須要改變，能夠經過white-space屬性來實現，顧名思義，這個屬性就是控制空白字符的，同時，他也會對瀏覽器的默認換行行爲有一些影響。

1. white-space:normal，這是默認值，也就是瀏覽器的默認行爲。除了上面提到的空白字符的處理外，當文字在一行放不下時，瀏覽器還會自動換行。關於換行的具體細節在下一篇博客介紹，這裏咱們簡單點，只考慮中文字符，字數多了放不下就換一行。

   <p>文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多</p>
   複製代碼

   最後顯示的效果以下：

2. white-space:nowrap：所謂wrap，翻譯成中文就是包裹，在CSS裏面，咱們能夠理解成當一行放不下時，爲了讓他不超出容器，瀏覽器就要給文字換行，將文字包裹起來。那麼nowrap就是不包裹，也就是文字超出就超出吧。

   <p style="white-space:nowrap">文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多</p>
   複製代碼

   最後顯示的效果以下：

3. white-space:pre：我但願我寫的格式就是最終展現的瀏覽器，瀏覽器不作任何處理，那就用這個值，或者用<pre>標籤也同樣的效果

   <p style="white-space:pre">    文字有點多文字有點多
     
     文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多
     
     
     
     文字有點多文字有點多文字有點多文字有點多文字有點多</p>
   複製代碼

   最後顯示的效果以下：

我在開頭加的空格沒有被忽略，中間加的換行符也沒有被當成空格，甚至多個換行符也沒有被合併，第二行超長了也沒有自動換行。總之，瀏覽器沒有作任何處理。

4. white-space:pre-wrap：pre的效果看來有點太粗暴了，我還須要wrap包裹一些，也就是在pre的基礎上但願自動換行。

   <p style="white-space:pre-wrap">    文字有點多文字有點多
     
     文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多
     
     
     
     文字有點多文字有點多文字有點多文字有點多文字有點多</p>
   複製代碼

   最後顯示的效果以下：

5. white-space:pre-line：line是一行的意思，加上line表明我更增強調換行，因此我就保留換行符，而且保留瀏覽器的wrap換行，這兩個都是跟換行相關的。空格仍是該合併合併，該忽略忽略，不跟pre同樣搞了。

   <p style="white-space:pre-line">    文字有點多文字有點多
     
     文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多
     
     
     
     文字有點多文字有點多文字有點多文字有點多文字有點多</p>
   複製代碼

   最後顯示的效果以下：

總結一下

這個屬性其實控制的是三點：

• 換行符是否當成空格處理
• 多個空格是否合併，收尾空格是否忽略
• 是否自動換行

每一個屬性對應的行爲也就是下面的表

	換行符	空格符的合併及忽略	自動換行
normal	當成空格，而且合併	合併	是
nowrap	當成空格，而且合併	合併	否
pre	保留	保留	否
pre-wrap	保留	保留	是
pre-line	保留	合併	是

關於換行，也仍是有不少細節的，下一篇詳聊~