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这种不靠谱的说法也不行，看来人家是铁了心。

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

共有 25 条评论

  1. 怿飞 @ 2008-07-03 09:08 #

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

    回复
  2. old9 @ 2008-07-03 09:46 #

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

    回复
  3. 怿飞 @ 2008-07-03 10:25 #

    @old9 是你RPWT，娃哈哈

    回复
  4. old9 @ 2008-07-04 10:12 #

    噢噢，好像又好了～

    回复
  5. 锐风 @ 2008-07-04 19:23 #

    唉, 好座位又被抢了.

    回复
  6. 锐风 @ 2008-07-04 19:25 #

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

    我强大的洞察力..

    回复
  7. aoao @ 2008-07-06 03:50 #

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

    回复
  8. roc @ 2008-07-06 11:49 #

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

    回复
  9. MacJi @ 2008-07-07 00:47 #

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

    回复
  10. 梦翔 @ 2008-07-11 17:56 #

    用了它，FF line-height失效

    回复
  11. aoao @ 2008-07-13 18:22 #

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

    回复
  12. 羽中 @ 2008-07-19 00:12 #

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

    回复
  13. zoloadang @ 2008-07-26 17:26 #

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

    回复
  14. chensulong @ 2008-08-15 08:41 #

    先保存下来了

    回复
  15. haha @ 2008-10-20 18:54 #

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

    回复
  16. 电脑维护网 @ 2009-02-01 14:23 #

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

    回复
  17. 14px @ 2009-03-21 22:06 #

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

    回复
  18. slowsay @ 2009-03-30 10:30 #

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

    回复
    • aoao @ 2009-03-30 13:00 #

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

      回复
  19. xiaohuixiongya @ 2009-12-02 10:54 #

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

    回复
  20. 小魁天下 @ 2010-01-03 13:29 #

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

    回复

Trackbacks/Pingbacks

发表评论

（必填）

（必填）