纯CSS在Firefox模拟text-overflow: ellipsis效果

text-overflow这个属性真让Firefox折腾,虽然之前有写过Firefox通过XUL实现text-overflow:ellipsis的效果,不过要外挂xbl来用也就一直没用,虽然想过Data URI,但其实还不如外挂xbl。

这两天在论坛看到14px同学写的超过宽度显示省略号(无js全兼容),想法很有创意,使用一张图片来做“…”,另一张图片用来在字不够长的情况下盖掉“…”,原文攻略很完整,大家可以去看一下思路,个人认为的缺点就是用了图片,不够灵活,所以我就悄悄修改了代码,思路是用父一层的元素的伪类:after来完成“…”,再用元素自身伪类:after来盖掉不应该出来的“…”,看一下效果:

纯CSS在firefox模拟text-overflow: ellipsis的效果

看上去好像很理想,但是text-overflow也不是那样好模拟的,有兴趣的同学看看demo就知道还有多少问题。

当成技术练手还是不错滴,不过估计应该不会拿着应用。

This entry was posted in Web开发 and tagged , , . Bookmark the permalink.

18 Responses to 纯CSS在Firefox模拟text-overflow: ellipsis效果

  1. at9t @ 2009-03-16 at 08:02

    报告!
    好像连接错了~~

    • aoao @ 2009-03-16 at 10:17

      =。= 多了http ,呵呵

  2. 阿肆 @ 2009-03-16 at 11:54

    Ctrl+A还会有意外惊喜

  3. 14px @ 2009-03-19 at 10:24

    换了个思路又写了个,这次支持了连续字母,背景也可以用非纯色的了,但是结构多了个span。

    大侠帮忙看看,after这伪类不知道怎么滴,就是用不好,不知道是不是它根本就不支持float:right。

    http://www.14px.com/demo/css-ellipsis.html

    • aoao @ 2009-03-20 at 23:13

      一直没看到效果。after不支持的是position

    • nttdocomo @ 2009-07-01 at 13:26

      你的网址失效了!

      • aoao @ 2009-07-01 at 23:37

        演示那个吗?还没挂。^^

  4. 天堂左我往右 @ 2009-03-20 at 23:06

    拜aoao和14px君了

  5. 14px @ 2009-03-21 at 09:57

    没看到效果?这链接蛮正常啊,我发个邮件吧。
    晕,这个span里面确实用了position,而且还是关键步骤,看样子只能这样了 – -!

  6. Robbie87 @ 2009-04-08 at 16:22

    嗷嗷师兄…明天就是今年呃裸体日啦…
    怎么你的站还穿着衣服…

  7. Andre @ 2009-04-09 at 16:52

    aoao今天也naked了

  8. 男人理想 @ 2009-08-18 at 15:27

    呵呵,还不错!不过没有多大实际意义觉得,text-overflow:ellipsis的应用基本上再服务器端直接截字了 –

  9. TaoGOGO @ 2009-08-22 at 21:56

    真滴8错哦

  10. lili @ 2009-10-26 at 13:33

    刚入行业,所以能不能说的清楚点或者直接粘贴处代码谢谢

    • aoao @ 2009-10-26 at 19:53

      文章末尾有一demo,点开就有代码

  11. goodboy889 @ 2010-02-25 at 15:57

    大哥,我购买了你写的《web 标准设计》,这本书好是好,但是缺少了光盘,书中一些实例要自己写代码运行,才知道效果。比如说233页里的“圆角”实例,你能不能提供一个源文件效果发给我看看?

  12. yezi @ 2011-02-16 at 14:22

    囧…这个方法不好…判断长度的…如果前面有个符号啥的就会发现后面的文字截断一半显示…
    还是js的实现起来比较完整…

发表评论

(必填)

(必填)