2009-3-15 下午 - Web开发 - - -

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

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

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

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

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

这篇文章发表于2009年3月15日 22:09:45，并被分类于Web开发。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论， 也可以发表你的评论。

共有 15 条评论

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

    报告！
    好像连接错了~~

    回复
    • aoao @ 2009-03-16 10:17 #

      =。= 多了http ,呵呵

      回复
  2. 阿肆 @ 2009-03-16 11:54 #

    Ctrl+A还会有意外惊喜

    回复
  3. 14px @ 2009-03-19 10:24 #

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

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

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

    回复
    • aoao @ 2009-03-20 23:13 #

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

      回复
    • nttdocomo @ 2009-07-01 13:26 #

      你的网址失效了！

      回复
      • aoao @ 2009-07-01 23:37 #

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

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

    拜aoao和14px君了

    回复
  5. 14px @ 2009-03-21 09:57 #

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

    回复
  6. Robbie87 @ 2009-04-08 16:22 #

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

    回复
  7. Andre @ 2009-04-09 16:52 #

    aoao今天也naked了

    回复
  8. 男人理想 @ 2009-08-18 15:27 #

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

    回复
  9. TaoGOGO @ 2009-08-22 21:56 #

    真滴8错哦

    回复
  10. lili @ 2009-10-26 13:33 #

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

    回复
    • aoao @ 2009-10-26 19:53 #

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

      回复

发表评论

（必填）

（必填）