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 属性用于设置文本空白符的处理规则,这其中包括:是否合并空白符、是否保留换行符、是否允许自动换行。各属性值的不同行为如下表所示:
属性值 空白符 换行符 自动换行 最早出现于
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 这个属性值脱颖而出——它正是我们所需要的。
共1/3页   1  2  3  下一页  


上一篇:注册表单的规则

下一篇:ASP.NET SQL 注入免费解决方案 

留下脚印压缩包密码:sosuo8
名字:
全部评论:
评论birdstudio2010-1-6 0:27:00
您提供的原文链接有误,请核对,谢谢!
答复已经修改好了,抱歉!
申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ IE6,7下实现white-space:pre-wrap; ”的原作者,若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法:email:ahuinan@21cn.com  QQ:106494262

感谢以下网友对网站提出的建议:
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)
文章档案
  • 作者:birdstudio
  • 来源:蓝色理想
  • 日期:2010-1-6 12:41:00
  • 点击:1005
网友投票(您觉得这篇文章怎样?)
loadding...请稍侯......