首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

【转】怎么在 IE6,7 上实现 white-space: pre-wrap

2012-11-25 
【转】如何在 IE6,7 下实现 white-space: pre-wrap转自:http://www.designcss.org/web_read.php?blogid400

【转】如何在 IE6,7 下实现 white-space: pre-wrap;

转自:http://www.designcss.org/web_read.php?blogid=400&PHPSESSID=e19deffb5f3b4f9558d6c8a55101d499

HTML 的空白符处理规则

?

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

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

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

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

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



white-space 属性

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



如果服务器端因为疏忽没有做换行符转换处理,那么在前端是否可以用最小的代价来补救?这时,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 的效果?



在 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 代码中,很显然对于标准浏览器,我们是用正常的 {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;} 更加强势,倔犟的文本行最终还是乖乖地换行了。

热点排行