文字处理之空白字符及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	保留	合并	是

关于换行，也仍是有不少细节的，下一篇详聊~