快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-28

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 的需求

我们先解释一下上述表格中的“自动换行”行为,它是指某元素内部的文本流按照文本方向排版,当文本流遇到限制其继续延伸的边界时,是否换行。&ld

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号