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

Posted on 2009-03-15 by aoao

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的实现起来比较完整…

    回复

给 aoao 回复 点击这里取消回复。

（必填）

（必填）