HTML 的空白符处理规则

HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。

我们知道，在默认情况下，HTML 源码中的空白符均被显示为空格，并且连续的多个空白符会被视为一个，或者说，连续的多个空白符会被合并。

然而在有些时候，我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现，或者需求源码中的换行符能起到真正的换行作用。于是，我们发现了 <pre> 标签，它可以真实还原它内部文本的空白符的真实情况。

于是我们经常会把一段表示计算机代码的文本放进 <pre> 标签中，它们在浏览器中会表现出本身的空格缩进和换行效果，而不需求我们添加额外的款式和标签来控制它的缩进和换行。

随着对 CSS 的了解不断深入，我们发现，原来这一切都是 white-space 属性在安排。<pre> 元素之所以如此神奇，是由于它本身具有 {white-space: pre;} 这一默认款式。

white-space 属性

CSS 中的 white-space 属性用于设置文本空白符的处理规则，这其中包括：能否合并空白符、能否保留换行符、能否允许自动换行。各属性值的不同行为如下表所示：

white-space 属性值一览表 

（注：在 CSS1/2 下，white-space 属性只可使用于块级元素；在 CSS 2.1 下，可使用于所有元素。）

如果我们需求某个容器元素具有类似 <pre> 元素的空白符处理行为，则为它设置 {white-space: pre;} 款式即可。

对 pre-wrap 的需求

我们先解释一下上述表格中的“自动换行”行为，它是指某元素内部的文本流按照文本方向排版，当文本流遇到限制其继续延伸的边界时，能否换行。“不允许自动换行”则意味着文本流会溢出该元素。

因此，{white-space: pre;} 款式有时候并不能满足我们的期望。比如，在某些不需求特别严谨的场合，或者排版某些对换行不敏感的代码片断（比如 HTML 或 CSS）的时候，我们不希望代码片段中的一行长代码令它的容器元素产生水平滚动条，由于那样不便阅读。我们希望在这种情况下，长代码自动换行就好。

这时，对照一下上表中各属性值的不同行为特征，我们会发现 pre-wrap 这个属性值脱颖而出——它正是我们所需求的。