在 IE6,7 下变通实现 pre-wrap

经常反复测试，我们找到了在 IE6,7 下变通实现 pre-wrap 效果的方法。

比如，有如下 HTML 结构：

<div class="content">这是一段多行文本数据其中某些文本行会非常长从而溢出容器比如你现在看到的这行行与行之间有换行符但没有使用 HTML 换行标签</div>

我们需要将 .content 元素设置为 pre-wrap 样式，理想情况下只需要编写如下 CSS 代码就可以了。、

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

但为了应付 IE6,7，我们需要将上述 CSS 代码修改如下：

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

这样就可以了，我们在各浏览器中实测一下，可以发现我们需要的效果完美实现。

当然，你可能注意到了，我们使用了一点儿 CSS hack。别担心，它们条理清晰并且容易维护，我觉得这可以接受。在面对低能浏览器的时候，我们只能给予它们一些额外关照。

原理

如果你是一个实用主义者，那么文章到这里已经结束了。你可以把代码存下然后走人，或者继续浏览 CSS魔法 的其它文章。如果你是一个充满好奇心的 CSS 学习者，那么我很乐意与你一起来分析一下它的实现原理。

在上面的最终版 CSS 代码中，很显然对于标准浏览器，我们是用正常的 {white-space: pre-wrap;} 来实现所需效果的。而对于 IE6,7，我们使用了 CSS hack，让它接受额外的样式声明，使用其它方法来实现类似 pre-wrap 的效果。

首先，在 IE6,7 下，{white-space: pre-wrap;} 这条样式声明由于不能识别而被丢弃，于是我们为 .content 另外设置了 {white-space: pre;} 的样式。我们已经很熟悉 pre 了，它的特性与我们想要的 pre-wrap 效果只有一点区别，即 pre 不允许自动换行，也就是说，较长的文本行可能会溢出其容器元素。

因此，接下来，为了让这些较长的文本行自动换行，我们为 .content 元素设置 {word-wrap: break-word;} 样式（谨慎起见，我们用 CSS hack 将这条声明隔离给 IE6,7；不过即使将它暴露给所有浏览器，它也是无害的）。这条声明负责对 .content 元素内的文本行进行约束，并强制其换行。也就是说，{white-space: pre;} 完成了识别文本换行符的任务，剩下的自动换行的任务交由 {word-wrap: break-word;} 来完成。

插播 word-wrap 的相关资料

CSS 发展至今经历了多个版本，但它对文本排版的控制仍然不够精确和灵活。于是微软的 IE 浏览器开发了一些私有属性，扩展了 CSS 的文本排版功能，尤其可贵的是，这些扩展属性大多考虑到了非拉丁语系语言的排版规则。由于这些私有扩展属性确实很有价值，它们被整理并收录到了 CSS3 草案中。
word-wrap 属性就是其中很有代表性的例子。它决定了文本行超过容器的边界时是否断开转行。目前这一属性已经得到了绝大多数主流浏览器的支持。

回到前面的原理分析，其实我们会发现一个矛盾，{white-space: pre;} 很倔犟地不愿换行，而 {word-wrap: break-word;} 则要求内部文本自动换行。面对这样的冲突，浏览器如何决断？

在 CSS 中，控制文本换行方式的属性有很多，当发生冲突的时候，某些属性在文本排版中的优先级更高，因而会在冲突中胜出，决定最终的文本样式。很显然，在上面的这起冲突中，{word-wrap: break-word;} 更加强势，倔犟的文本行最终还是乖乖地换行了。

结语

感谢你看到了这里，希望这篇文章对你有所帮助！

原文：http://www.cssmagic.net/blog/article/w3c/white-space-pre-wrap-workaround-in-ie6-ie7.html

经典论坛交流：
http://bbs.blueidea.com/thread-2964123-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/7310.asp　

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

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

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