云在天边看世界

HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。在默认情况下，HTML 源码中的空白符均被显示为空格，并且连续的多个空白符会被合并为一个。

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

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

下表列出了white-space 这一CSS属性可能取的值：

white-space 属性值一览表

inherit 规定应该从父元素继承 white-space 属性的值。(注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。)

对照上表各属性的不同特征，我们会发现 pre-wrap 这个属性值更能满足我们的需求。

以下举例说明nomal和pre-wrap属性值的不同显示状态。

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

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

如果服务器端没有做换行符转换处理，那么在前端是否可以用最小的代价来补救？这时，pre-wrap 就可以发挥作用，直接为文本的容器元素设置 {white-space: pre-wrap;} 样式，就可以还原多行文本的真实状态。

由于pre-wrap 是从 CSS 2.1 才开始引入的属性值，目前网民使用最为广泛的 IE6 和 IE7 浏览器，完全不能识别 pre-wrap，当然也无法实现 pre-wrap 的空白符处理行为。那么如何在IE6、IE7下实现此效果呢？我们可以通过一句CSS hack来完成。

假设我们需要对下面的html结构进行换行

<div class="comment">“Googol”是一个数学术语，表示 1 后面带有 100 个零。 它是由美国数学家爱德华·卡斯纳的侄子米尔顿·西洛塔所创造，因出现在凯斯纳和詹姆士·纽曼合著的“数学与想象力”一书中而得到普及。 Google 公司对这个词作了微小改变，借以反映公司的使命，意在组织网上无边无际的信息资源。</div>

我们需要将 .comment元素设置为 pre-wrap 样式，理想情况下只需要编写如下 CSS 代码:

.comment {
white-space: pre-wrap;
 }

但为了兼容 IE6,7，我们需要将上述 CSS 代码稍作修改如下：

.comment {
 white-space: pre-wrap;
 *white-space: pre;
 *word-wrap: break-word;
 }

到这里，我想你已经明白了如何使你的网站显示效果更好了吧，赶快去亲自尝试一下吧！