IE6和IE7下实现white-space:pre-wrap;效果

HTML 的空白符处理规则

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

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

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

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

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

white-space 属性

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

white-space 属性值一览表 

属性值	空白符	换行符	自动换行	最早出现于
normal	合并	忽略	允许	CSS 1
nowrap	合并	忽略	不允许	CSS 1
pre	保留	保留	不允许	CSS 1
pre-wrap	保留	保留	允许	CSS 2.1
pre-line	合并	保留	允许	CSS 2.1

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

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

对 pre-wrap 的需求

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

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

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

对 pre-wrap 的另一种需求

再来看另一种实战中可能会遇到的情形。

表单中的文本域（<textarea> 元素）可以接受包含换行符的文本数据，这是它有别于文本框（text 类型的 <input> 元素）的重要特征之一，所以我们通常也称它为“多行文本框”。

随之而来的一个问题就是，我们通过多行文本框提交多行文本数据，是为了在网页上最终显示出多行文本。但由于浏览器对 HTML 源代码默认进行空白符合并处理，为了确保我们提交的多行文本数据最终在网页上正确地呈现出多行的形态，通常需要在服务器端做处理，比如将文本中的换行符转换为 HTML 的换行标签 <br>，再写入数据库；或者从数据库中读出文本数据时进行类似的转换操作。

这样当服务器向网页输出这些文本数据时，原始的回车状态才能得到再现。

但是，由于设计失误（或系统有意限制），服务器端可能就不会做这样的处理。从而导致这些文本信息中的换行符无法呈现出换行效果，取而代之的是一个小空格。

第1页:IE6和IE7下实现white-space:pre-wrap;效果(1)   第2页:IE6和IE7下实现white-space:pre-wrap;效果(2)