IE6,7下实现white-space:pre-wrap;
作者:birdstudio 来源:CSS魔法 发布时间:2009-12-31 18:30:00
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 这个属性值脱颖而出——它正是我们所需要的。
猜你喜欢
- 对象Javascript 根本上是和对象相关的。数组是对象。函数是对象。对象是对象。那什么是对象呢?对象是名-值对的集合。名是字符串,值可以
- 这段时间,关于asp的前途,关于asp的好坏的讨论贴,都有好些了。当然,大家的心都是好的,但是一些朋友说的话,真是让人郁闷。个人觉得,在现在
- jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的J&
- 如何在ADO服务器端利用好缓存技术?请看下面示例,这是一个用来显示图书分类的例子程序:displayBooks.asp< %
- css实现的圆角矩形的方式很多,但要追求灵活型,上面的结构简单,看起来爽一点注意css所用的图片路径,已修改兼容ie6 ie7 ff ,IE
- “用户体验”作为舶来品在国内风靡已经有几个年头了,而且从目前情况来看仍旧会继续风靡一段时间。当某产品发布会上,发言人张口闭口就
- 表一、运算符与特殊字符 运算符描述/选择子元素,返回左侧元素的直接子元素;如果"/"位于最左侧表示选择根结点的直接子元素
- 在进行数据库的查询时,会经常遇到这样的情况:例如想在一个用户数据库中查询他的用户名和他的密码,但恰好该用户使用的名字和密码中有特殊的字符,例
- <?php/*======================================事务处理==================
- 很多朋友对FrontPage2003中增加的网页布局功能很感兴趣,现在我们一起来深入了解这一实用功能。 用FrontPage200
- 这份代码不是那种时间没有改变也输出innerHTML的高消耗代码。innerHTML和style的改变是非常消耗游览器性能的,如果你将来希望
- 如何显示最后十名来访者?代码和说明见下:<%Application.LockIF NOT isArray(&nbs
- 纯粹的截取字符串其实比较简单,用一个Left就搞定,但一个是全英文标题,一个是全中文标题,或中文混合排在一起,长短不一就很明显了,要考虑到中
- 很多时候,设计师们都会通过各种渠道去了解用户的需求,然而从这些渠道反馈回来的信息大部分只是用户的期望并不是真正的用户需求,但是很多时候这些期
- 传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。CSS3带来了一些新的处理颜色
- 本文通过实例解析了 SQL Server 数据库扩展存储过程,实现远程备份与恢复的方法和步骤实例说明: 环境:win2k+sqlserver
- icech: 在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。方法一:作一个1X2的图。半黑半白,再利用表格作成
- 校勘(collation)是指对代码页、字母大小写、音调、语言和字母表的整理,很多校勘都是在数据进入数据库之前进行的,根据我的经验,北美的大
- 方法一一般情况下,SQL数据库的收缩并不能很大程度上减小数据库大小,其主要作用是收缩日志大小,应当定期进行此操作以免数据库日志过大1、设置数
- 有时一些网页对源码进行了加密,我们很难找到类似像“onselectstart="return false"”这样的代码,