一起CSS

当前位置:一起CSS > CSS > 文章正文

我看超过部分自动隐藏或显示省略号

日期:2009-01-13 分类:CSS

文章列表或类似文章列表的区域,如果宽度不是很长,为了防止标题字数过多而换行或撑破容器,使布局错位,我们一般会让超过部分自动隐藏或显示成省略号。用程序很容易控制,但不利于 SEO ,所以很多人选择了 CSS 。但用 CSS 就没有问题了吗?我看未必。由于各个浏览器对 CSS 的支持不一样,所以出现了很多不兼容的情况,在这个问题上也一样。那到底会出现什么问题呢?

1、设置的是自动隐藏

自动隐藏,那肯定有一个参考的宽度。如果这个宽度不能正好的容纳标题,那么后面的字就会被“剪掉”,只显示半部分。也许你会说:那就设一个正好的宽度。但是你有没有想过:如果标题中有标点符号、英文字母或数字呢?标点符号还好解决,中文的标点符号和汉字的宽度一样。但英文字母和数字就不好解决了,英文和数字的宽度会因为字体、个数的不同而不同。这就使原本“正好的宽度”变成“不是正好的宽度”。

2、设置的是显示省略号

设置显示省略号就不会出现文字被“剪掉”的情况。但有的浏览器不兼容,不兼容的浏览器仍然可能出现换行或撑破容器的情况。

3、自动隐藏于显示省略号一起用

一般情况下都是自动隐藏于显示省略号一起用,但不显示省略号的浏览器仍然有可能出现文字被“剪掉”的情况。

下面看一个例子,请点击这里,这个例子出现了上面三种情况。下图是该例在能显示省略号和不能显示省略号的浏览器中的效果:

从效果图可以看到:能显示省略号的浏览器效果还不错,但不能显示省略号的浏览就出现了文字被“剪掉”的情况,而且“剪”的部分都不一样。

另:如果加上 -o-text-overflow:ellipsis ,Opera 也可以显示省略号。

虽然 IE6 、IE7 、Opera 、Chrame 都能显示省略号,但还是有一些不同。比如截取的字数不一样、链接下划线长度不一样。所以,由于目前种种情况,我认为用 CSS 并不合适。

查看:1,345 评论:4

随机日志

共有 4 条评论

  • 鹤庭逸 说:

    施主,老衲的看法是 Css可以全部实现浏览器的省略号效果,只是各个浏览器对“截掉”的理解不一样,很难用css解决,当然最好的办法是限制字数,用后台实现,其实SEO这个在中国感觉实用的价值不是太大,百度的竞价排名就说明了这一点,要提高排名,就用“Money”才是王道。

  • 老鼠 说:

    不是吧,也就是说搜索引擎只鼓励CSS的应用?

  • 老鼠 说:

    防止标题字数过多?
    呵呵,我想大部分人都会选择在客户端设置字符的长度,不超多少多少个字就行了,这样就没有接下的问题了。
    或者呢,隐藏就隐藏呗,加个alt就行了,哈哈。

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved