Home > 网页前端 > CSS white-space 使用技巧

CSS white-space 使用技巧

November 25th, 2010 发表评论 阅读评论

HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被合并为一个。

有些时候,我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现,或者需要源码中的换行符能起到真正的换行作用。于是,我们发现了 <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
inherit 继承父元素 继承父元素 继承父元素

inherit 规定应该从父元素继承 white-space 属性的值。(注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。)

对照上表各属性的不同特征,我们会发现 pre-wrap 这个属性值更能满足我们的需求。

以下举例说明nomal和pre-wrap属性值的不同显示状态。

“Googol”是一个数学术语,表示 1 后面带有 100 个零。 它是由美国数学家爱德华·卡斯纳的侄子米尔顿·西洛塔所创造,因出现在凯斯纳和詹姆士·纽曼合著的“数学与想象力”一书中而得到普及。 Google 公司对这个词作了微小改变,借以反映公司的使命,意在组织网上无边无际的信息资源。 ■ ■(默认情况下,文本不换行、空格被合并)
“Googol”是一个数学术语,表示 1 后面带有 100 个零。 它是由美国数学家爱德华·卡斯纳的侄子米尔顿·西洛塔所创造,因出现在凯斯纳和詹姆士·纽曼合著的“数学与想象力”一书中而得到普及。 Google 公司对这个词作了微小改变,借以反映公司的使命,意在组织网上无边无际的信息资源。 ■ ■(white-space:pre-wrap;文本换行、空格正常显示)

表单中的文本域(<textarea> 元素)可以接受包含换行符的文本数据,这是它有别于文本框(text 类型的 <input> 元素)的重要特征之一,所以我们通常也称它为“多行文本框”。

随之而来的一个问题就是,我们通过多行文本框提交多行文本数据,是为了在网页上最终显示出多行文本。但由于浏览器对 HTML 源代码默认进行空白符合并处理,为了确保我们提交的多行文本数据最终在网页上正确地呈现出多行的形态,通常需要在服务器端做处理,比如将文本中的换行符转换为 HTML 的换行标签 <br>,再写入数据库;或者从数据库中读出文本数据时进行类似的转换操作。这样当服务器向网页输出这些文本数据时,原始的回车状态才能得到再现。

如果服务器端没有做换行符转换处理,那么在前端是否可以用最小的代价来补救?这时,pre-wrap 就可以发挥作用,直接为文本的容器元素设置 {white-space: pre-wrap;} 样式,就可以还原多行文本的真实状态。

由于pre-wrap 是从 CSS 2.1 才开始引入的属性值,目前网民使用最为广泛的 IE6 和 IE7 浏览器,完全不能识别 pre-wrap,当然也无法实现 pre-wrap 的空白符处理行为。那么如何在IE6、IE7下实现此效果呢?我们可以通过一句CSS hack来完成。

假设我们需要对下面的html结构进行换行

<div class="comment">“Googol”是一个数学术语,表示 1 后面带有 100 个零。 它是由美国数学家爱德华·卡斯纳的侄子米尔顿·西洛塔所创造,因出现在凯斯纳和詹姆士·纽曼合著的“数学与想象力”一书中而得到普及。 Google 公司对这个词作了微小改变,借以反映公司的使命,意在组织网上无边无际的信息资源。</div>

我们需要将 .comment元素设置为 pre-wrap 样式,理想情况下只需要编写如下 CSS 代码:

.comment {
white-space: pre-wrap;
 }

但为了兼容 IE6,7,我们需要将上述 CSS 代码稍作修改如下:

.comment {
 white-space: pre-wrap;
 *white-space: pre;
 *word-wrap: break-word;
 }

到这里,我想你已经明白了如何使你的网站显示效果更好了吧,赶快去亲自尝试一下吧!

转载请以超链接注明来自  云在天边看世界
本文永久链接  http://www.tangblog.info/2010/11/25/tips-for-white-space-css-style.html

分类: 网页前端 标签: ,

  1. avatar
    qiaokeli 2011-01-02 at 21:55 |#36

    去试试
  2. avatar
    buy abercrombie 2010-12-10 at 15:23 |#35

    new coach bags來咯。。在來踩踩。呵呵。
  3. avatar
    guest 2010-12-02 at 16:36 |#34

    代码一直出错,请问一下是怎么回事啊。。
  4. avatar
    admin 2010-12-02 at 13:15 |#33

    @Lambert
    什么问题啊?
  5. avatar
    Lambert 2010-12-02 at 10:26 |#32

    又评论不起
  6. avatar
    admin 2010-11-30 at 23:18 |#31

    @Angel
    呵呵,我就说你这几天怎么拿手机上网了啊
  7. avatar
    Angel 2010-11-30 at 22:49 |#30

    嘿嘿,等有时间我再加再ipv6吧,,宿舍的宽带11月开始就不用了,,我也开始用我的联通186上网了。
    from wap blog
  8. avatar
    guest 2010-11-30 at 09:27 |#29

    ORG的域名还有一些吧、我说的是好域名
  9. avatar
    婚庆策划 2010-11-29 at 15:14 |#28

    好像没有用过个呢、、、、
  10. avatar
    Angel 2010-11-28 at 10:11 |#27

    @云在天边
    额。。。这个主题,,,太宽了。。
  11. avatar
    云在天边 2010-11-27 at 23:02 |#26

    @Angel
    嗯,这个主题倒是真见过啦,你把人家的全给拔过来啦
    这位朋友想要移植一个非主流的主题,你看看啊 http://www.tangblog.info/contact#comment-1526002 ,我是没时间搞啊
  12. avatar
    Angel 2010-11-27 at 22:50 |#25

    嘿嘿,今天下午+晚上又移植一个皮,这个主题你必须见过,确切的说,是临模这个主题;现在就差p标签样式没解决了,明天早上就搞定,哈哈!
    from wap blog
  13. avatar
    Angel 2010-11-27 at 22:50 |#24

    嘿嘿,今天下午+早上又移植一个皮,这个主题你必须见过,确切的说,是临模这个主题;现在就差p标签样式没解决了,明天早上就搞定,哈哈!
    from wap blog
  14. avatar
    云在天边 2010-11-27 at 15:43 |#23

    @iCyOMiK
    这个是我调用的API
    http://ip.tangblog.info/uaimg
    你可以看我的前几篇文章,我有介绍的,或者到留言板看看以前的评论,有人问过的
  15. avatar
    iCyOMiK 2010-11-27 at 15:38 |#22

    @云在天边,嗯,试试,如果看到这个留言就是成功了~
    PS:你发的主题没有那个类似于“您来自广东省韶关市 广东松山职业技术学院,使用 [Linux (Mint)] Linux (Mint) , [Firefox 3.6.10] Firefox 3.6.10系统,欢迎访问本站!”的功能~
  16. avatar
    云在天边 2010-11-27 at 14:21 |#21

    @dengmin
    我这里面基本都是0.01的
  17. avatar
    云在天边 2010-11-27 at 14:20 |#20

    @iCyOMiK
    你现在试试,我刚才改了一下
  18. avatar
    dengmin 2010-11-27 at 13:27 |#19

    @云在天边
    也不多啊,到现在才17个点击
  19. avatar
    iCyOMiK 2010-11-27 at 13:24 |#18

    @云在天边
    谢谢~谢谢~
    PS:firefox清除cookies,还是没有弹出验证码。
  20. avatar
    云在天边 2010-11-27 at 12:26 |#17

    @iCyOMiK
    我收到了,可以给你的,但是我不能保证你能正常使用(存在所谓的不“兼容”,我用的和发布的micolog稍有不同),等一会儿给你发过去
Comment pages 12»
  1. 本文目前尚无任何 trackbacks 和 pingbacks.
/static/smilies/icon_twisted.gif /static/smilies/icon_smile.gif /static/smilies/icon_cry.gif /static/smilies/icon_question.gif /static/smilies/icon_razz.gif /static/smilies/icon_mrgreen.gif /static/smilies/icon_sad.gif /static/smilies/icon_evil.gif /static/smilies/icon_exclaim.gif /static/smilies/icon_redface.gif /static/smilies/icon_biggrin.gif /static/smilies/icon_surprised.gif /static/smilies/icon_eek.gif /static/smilies/icon_confused.gif /static/smilies/icon_cool.gif /static/smilies/icon_lol.gif /static/smilies/icon_mad.gif /static/smilies/icon_rolleyes.gif /static/smilies/icon_wink.gif /static/smilies/icon_idea.gif /static/smilies/icon_arrow.gif /static/smilies/icon_neutral.gif
capacha 请输入验证码(不区分大小写)