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

HTML 的空白符处理规则

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

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

然而在有些时候，咱们但愿 HTML 源码中的多个连续空格在网页浏览器中能够真实地呈现，或者须要源码中的换行符能起到真正的换行做用。因而，咱们发现了 <pre> 标签，它能够真实还原它内部文本的空白符的真实状况。

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

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

white-space 属性

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

white-space 属性值一览表

属性值	空白符	换行符	自动换行	最先出现于
normal	合并	忽略	容许	CSS 1
nowrap	合并	忽略	不容许	CSS 1
pre	保留	保留	不容许	CSS 1
pre-wrap	保留	保留	容许	CSS 2.1
pre-line	合并	保留	容许	CSS 2.1

（注：在 CSS1/2 下，white-space 属性只可应用于块级元素；在 CSS 2.1 下，可应用于全部元素。）

若是咱们须要某个容器元素具备相似 <pre> 元素的空白符处理行为，则为它设置 {white-space: pre;} 样式便可。

对 pre-wrap 的需求

咱们先解释一下上述表格中的“自动换行”行为，它是指某元素内部的文本流按照文本方向排版，当文本流遇到限制其继续延伸的边界时，是否换行。“不容许自动换行”则意味着文本流会溢出该元素。

所以，{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 下实现 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 学习者，那么我很乐意与你一块儿来分析一下它的实现原理。

在上面的最终版 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;} 更增强势，倔犟的文本行最终仍是乖乖地换行了。

 

 

 

G

M

T

 

 

Detect languageAfrikaansAlbanianAmharicArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CorsicanCroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchFrisianGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHawaiianHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanKurdishKyrgyzLaoLatinLatvianLithuanianLuxembourgishMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPashtoPersianPolishPortuguesePunjabiRomanianRussianSamoanScots GaelicSerbianSesothoShonaSindhiSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshXhosaYiddishYorubaZulu

AfrikaansAlbanianAmharicArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CorsicanCroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchFrisianGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHawaiianHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanKurdishKyrgyzLaoLatinLatvianLithuanianLuxembourgishMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPashtoPersianPolishPortuguesePunjabiRomanianRussianSamoanScots GaelicSerbianSesothoShonaSindhiSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshXhosaYiddishYorubaZulu

 

 

 

Text-to-speech function is limited to 200 characters

 

Options : History : Feedback : Donate

Close