2008-7-3 上午 - Web开发 - -

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

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

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

Creative Commons License

这篇文章发表于2008年7月3日 02:09:00，并被分类于Web开发。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论， 也可以发表你的评论，或者在您自己的网站中引用（trackback）该篇日志。

共有 15 条评论

  1. 怿飞 2008年7月03日 上午 9:08 ₪

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

  2. old9 2008年7月03日 上午 9:46 ₪

    我靠，被GFW了？翻墙才看到

  3. 怿飞 2008年7月03日 上午 10:25 ₪

    @old9 是你RPWT，娃哈哈

  4. old9 2008年7月04日 上午 10:12 ₪

    噢噢，好像又好了～

  5. 锐风 2008年7月04日 下午 7:23 ₪

    唉, 好座位又被抢了.

  6. 锐风 2008年7月04日 下午 7:25 ₪

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

    我强大的洞察力..

  7. aoao 2008年7月06日 上午 3:50 ₪

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

  8. roc 2008年7月06日 上午 11:49 ₪

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

  9. MacJi 2008年7月07日 上午 12:47 ₪

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

  10. 梦翔 2008年7月11日 下午 5:56 ₪

    用了它，FF line-height失效

  11. aoao 2008年7月13日 下午 6:22 ₪

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

  12. 羽中 2008年7月19日 上午 12:12 ₪

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

  13. Trackback firefox实现ie下的text-overflow:ellipsis效果 | 歪批 | 讨论网站开发的博客 2008年7月19日 上午 12:13 ₪

    [...] 参考文章：http://www.aoao.org.cn/blog/2008/07/firefox-text-overflow-ellipsis/ [...]

  14. zoloadang 2008年7月26日 下午 5:26 ₪

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

  15. chensulong 2008年8月15日 上午 8:41 ₪

    先保存下来了

发表评论

（必填）

（必填）

　评论仅支持＂a、abbr、strong、em、blockquote、code＂几个简单的标签