一起CSS

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

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

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

1、设置的是自动隐藏

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

2、设置的是显示省略号

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

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

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

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

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

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

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

查看:4,686 评论:4

随机日志

已经有 4 条群众意见

  1. 老鼠

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

    #1
  2. qingse老鼠

    但是不利于 SEO 。。。 对话

    #2
  3. 老鼠

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

    #3
  4. 鹤庭逸

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

    #4

我要发表意见