文字处理之一空白字符及whitespace属性

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	保留	合并	是

关于换行，也还是有很多细节的，下一篇详聊~