因此,{white-space: pre;} 样式有时候并不能满足我们的期望。比如,在某些不需要特别严谨的场合,或者排版某些对换行不敏感的代码片断(比如 HTML 或 CSS)的时候,我们不希望代码片段中的一行长代码令它的容器元素产生水平滚动条,因为那样不便阅读。我们希望在这种情况下,长代码自动换行就好。
这时,对照一下上表中各属性值的不同行为特征,我们会发现 pre-wrap 这个属性值脱颖而出——它正是我们所需要的。
对 pre-wrap 的另一种需求
再来看另一种实战中可能会遇到的情形。
表单中的文本域(<textarea> 元素)可以接受包含换行符的文本数据,这是它有别于文本框(text 类型的 <input> 元素)的重要特征之一,所以我们通常也称它为“多行文本框”。
随之而来的一个问题就是,我们通过多行文本框提交多行文本数据,是为了在网页上最终显示出多行文本。但由于浏览器对 HTML 源代码默认进行空白符合并处理,为了确保我们提交的多行文本数据最终在网页上正确地呈现出多行的形态,通常需要在服务器端做处理,比如将文本中的换行符转换为 HTML 的换行标签 <br>,再写入数据库;或者从数据库中读出文本数据时进行类似的转换操作。
这样当服务器向网页输出这些文本数据时,原始的回车状态才能得到再现。
但是,由于设计失误(或系统有意限制),服务器端可能就不会做这样的处理。从而导致这些文本信息中的换行符无法呈现出换行效果,取而代之的是一个小空格。
(下图为 cnBeta 网站对评论文本的两种不同处理方式:左侧为普通评论,可能为了限制各条评论的高度、防止恶意刷屏,系统未做换行符转换处理;右侧为热门评论,系统进行了处理。)
如果服务器端因为疏忽没有做换行符转换处理,那么在前端是否可以用最小的代价来补救?这时,pre-wrap 就可以发挥作用——无需做任何的额外处理,直接为文本的容器元素设置 {white-space: pre-wrap;} 样式,就可以还原多行文本的真实状态。
杯具的 IE6 和 IE7
再来看一下上面的表格,我们发现 pre-wrap 是从 CSS 2.1 才开始引入的属性值。然而,目前网民使用最为广泛的 IE6 和 IE7 浏览器都是基于 CSS1 和部分 CSS2 的,它们完全不能识别 pre-wrap,当然也无法实现 pre-wrap 的空白符处理行为。
在疯狂地问候了微软、IE 及其相关人等之后,网页开发者们还是不得不面对这个问题——如何在 IE6,7 下实现










