IE6,7下实现white-space:pre-wrap;(3)
作者:birdstudio 来源:CSS魔法 发布时间:2009-12-31 18:30:00
在 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;} 更加强势,倔犟的文本行最终还是乖乖地换行了。
结语
感谢你看到了这里,希望这篇文章对你有所帮助!
原文:http://www.cssmagic.net/blog/article/w3c/white-space-pre-wrap-workaround-in-ie6-ie7.html
猜你喜欢
- 概要:本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bot
- 传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。CSS3带来了一些新的处理颜色
- 在登陆界面中,通常,最重要的部分为登陆的Form表。一个非常棒的提升体验的做法是,在载入页面时自动聚焦到第一个提供用户输入的表单框,让用户不
- <%sql = "select * from SMT_addt
- 仿豆瓣分页原型(Javascript版)写了个分页的样式。自我感觉,这样的分页前后兼顾,对于用户的体验是蛮好使的Javascript分页代码
- MySQL中有许多操作符和函数可以返回字符串。本节回答这个问题:返回的字符串使用什么字符集和 校对规则?对于简单的函数,即接收字符串输入然后
- 网络开发的在分页上要是遇到数(几十)万以上的数据还是用ADO那样的分页会速度很慢的。有了存储过程速度就快多了。下面是本人用50万的数据进行的
- 介绍 IIRF是一款开源的重写URL过滤器,类似于Apache的URL重写,基于VC8.0(可以用Visual Studio200
- SQL Server数据库备份有两种方式,一种是使用BACKUP DATABASE将数据库文件备份出去,另外一种就是直接拷贝数据库文件mdf
- 我们进行CSS网页布局的时候,都知道它需要符合XHTML1.0规范。如果我们在进行CSS网页布局的时候,还在使用被W3C废弃的元素,那就失去
- 需要的软件phpStudy 用来导入一个数据库api-server 数据库功能可以开启一个服务器,让开发环境可以使用生产环境的网址请求安装
- 1.指向“开始->程序->Microsoft SQL Server 2005->配置工具->SQL Server 外
- 先废话几句,这第23篇教程一直没有翻译出来,直到今天我看到待审评论里面有这么一条超长的评论,结果一看,居然是这篇教程的翻译稿。
- 一、单字节SQL注入MYSQL的SQL注入已经由来已久,以下是普遍采用的注入步骤:1、在GET参数上加一个/*或者#(mysql专有的注释)
- replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(st
- 如果你是一名Web Developer,而且还知道CSS Sprite这个词,请先去搜索一下,也许你正在使用这个技术,但只是不知道它的名字罢
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 12 - Drag and Drop using
- 注:此处“重复”非完全重复,意为某字段数据重复HZT表结构IDintTitlenvarchar(50)AddDatedatetime数据一.
- This is a {t}. {name}是一个很强大的字符串模板解析方法。它接受三个参数,分别是{args.text},{args.obj
- 本文给出一条 SQL 语句用于展示在同一名服务器上,不同的数据库间查询,注意当前连接用户要对两个库都有权限SQL Server 中 SQL