firefox不支持text-overflow一直让人很折腾。。不过还好有大虾为我们提供解决方案。。text-overflow: ellipsis for firefox

Firefox still does not implement the proposed CSS3 text-overflow property. It does however provide a similar behaviour for the XUL description element. Furthermore, it does support XBL bindings through CSS. This leads to the following solution:

.ellipsis {
  text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');
<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
  <binding id="ellipsis">
    <content>
      <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
    </content>
  </binding>
</bindings>

xul:descriptioncrop原来是那样强。。除了可以点点点掉后面的。。还可以点点点前面或者中间部分的。。这个功能可是非常实用哦,不知道W3C虾米时候也给这样的CSS属性让我们简单搞定一大堆问题呢。

然后还不小心发现。hedger悄悄的也实现一样的功能Hacking text-overflow for Firefox,不过还是感觉用XBL简洁方便。。

在很久很久以前,我也在研究,能不能调用firefox处理title的点点点的东东来完成效果,不过一直没实现。之前提出的-moz-text-overflow: ellipsis;via这种不靠谱的说法也不行,看来人家是铁了心。

共有 25 条评论

  1. 怿飞 @

    不错的方法,有时候不得不佩服老外的创意。

  2. old9 @

    我靠,被GFW了?翻墙才看到

  3. 怿飞 @

    @old9 是你RPWT,娃哈哈

  4. old9 @

    噢噢,好像又好了~

  5. 锐风 @

    唉, 好座位又被抢了.

  6. 锐风 @

    title 里写 XUL, 正文里写 XBL.
    到底是哪个捏, 晕了.

    我强大的洞察力..

  7. aoao @

    @锐风 你觉得你的洞察力真的强吗??

  8. roc @

    锐风被无情的讽刺了~
    另,aoao也是熬夜一族

  9. MacJi @

    重装上阵,好期待惊喜。。。

  10. 梦翔 @

    用了它,FF line-height失效

  11. aoao @

    @梦翔 私有东西通常会引起不良后果滴。。。

  12. 羽中 @

    先不管引起不引起不了后果,先拿来用了

  13. zoloadang @

    终于找到方法咯!!~~~

  14. chensulong @

    先保存下来了

  15. haha @

    似乎只对 ff3起作用
    换做ff2 就歇菜了!

  16. 电脑维护网 @

    text-overflow:ellipsis;overflow:hidden;怎么多余的文字不能隐藏呢

  17. 14px @

    来感谢一哈,嘿嘿,灰常好用。

  18. slowsay @

    另外,请教aoao,你所用编写xml的软件平台是哪款软件
    我一直用大胡子破译xml的软件
    :)

    • aoao @

      XML用一般编辑器就行了吧,我都是手写,没什么所谓的。

  19. xiaohuixiongya @

    很感谢!!可是line-height 不起作用了@@

  20. 小魁天下 @

    此方法最大的症结在于ellipsis.xml文件的存放路径。想必用过的朋友都会遇到这种问题,路径如果不在同一目录下,显示是一片空白。很是头疼。

Trackbacks/Pingbacks

发表评论

(必填)

(必填)