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 属性用于设置文本空白符的处理规则,这其中包括:是否合并空白符、是否保留换行符、是否允许自动换行。各属性值的不同行为如下表所示:
(注:在 CSS1/2 下,white-space 属性只可应用于块级元素;在 CSS 2.1 下,可应用于所有元素。)
如果我们需要某个容器元素具有类似 <pre> 元素的空白符处理行为,则为它设置 {white-space: pre;} 样式即可。
对 pre-wrap 的需求
我们先解释一下上述表格中的“自动换行”行为,它是指某元素内部的文本流按照文本方向排版,当文本流遇到限制其继续延伸的边界时,是否换行。“不允许自动换行”则意味着文本流会溢出该元素。
因此,{white-space: pre;} 样式有时候并不能满足我们的期望。比如,在某些不需要特别严谨的场合,或者排版某些对换行不敏感的代码片断(比如 HTML 或 CSS)的时候,我们不希望代码片段中的一行长代码令它的容器元素产生水平滚动条,因为那样不便阅读。我们希望在这种情况下,长代码自动换行就好。
这时,对照一下上表中各属性值的不同行为特征,我们会发现 pre-wrap 这个属性值脱颖而出——它正是我们所需要的。
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 这个属性值脱颖而出——它正是我们所需要的。
上一篇:注册表单的规则
下一篇:ASP.NET SQL 注入免费解决方案
全部评论:
birdstudio | 2010-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)
感谢以下网友对网站提出的建议:
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)
文章档案
- 作者:birdstudio
- 来源:蓝色理想
- 日期:2010-1-6 12:41:00
- 点击:1005
网友投票(您觉得这篇文章怎样?)
请稍侯......
请稍侯......
文章阅读排行
随便看看
最新评论
- 不錯的東東,
打包demoupload.asp,js部分尾多了一個逗號
有空多交流:QQ 37787553 - 不錯的東東,
打包demoupload.asp,js部分尾多了一個逗號
有空多交流:QQ 37787553 - 站长 好!
- 网站不错<br>不知道URl是用什么生成的?
- update A
set A.OriginSalary=A.OriginSalary+B.AddSalary
from dbo.OriginSalary as A left join dbo.AddSalary as B on A.O_ID=B.O_ID - update A
set A.OriginSalary=A.OriginSalary+B.AddSalary
from dbo.OriginSalary as A left join dbo.AddSalary as B on A.O_ID=B.O_ID - 例子举得不好,为什么不直接用update解决呢?
update set A.OriginSalary=A.OriginSalary+B.AddSalary
from dbo.OriginSalary as A left join dbo.AddSalary as B on A.O_ID=B.O_ID - 例子举得不好,为什么不直接用update解决呢?
update set A.OriginSalary=A.OriginSalary+B.AddSalary
from dbo.OriginSalary as A left join dbo.AddSalary as B on A.O_ID=B.O_ID - 恭喜站长改进 支持
- 改版了? 牛叉
- 网站不错^-^ 多多向站长学习
- 212
- 啊 是
birdstudio
已经修改好了,抱歉!