对 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 下实现 pre-wrap 的效果？

出处：蓝色理想
责任编辑：bluehearts

上一页 IE6,7下实现white-space:pre-wrap; [1] 下一页 IE6,7下实现white-space:pre-wrap; [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。