firefox通过XUL实现text-overflow:ellipsis的效果

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

This entry was posted in Web开发 and tagged , , . Bookmark the permalink.

33 Responses to firefox通过XUL实现text-overflow:ellipsis的效果

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

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

  2. old9 @ 2008-07-03 at 09:46

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

  3. 怿飞 @ 2008-07-03 at 10:25

    @old9 是你RPWT,娃哈哈

  4. old9 @ 2008-07-04 at 10:12

    噢噢,好像又好了~

  5. 锐风 @ 2008-07-04 at 19:23

    唉, 好座位又被抢了.

  6. 锐风 @ 2008-07-04 at 19:25

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

    我强大的洞察力..

  7. aoao @ 2008-07-06 at 03:50

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

  8. roc @ 2008-07-06 at 11:49

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

  9. MacJi @ 2008-07-07 at 00:47

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

  10. 梦翔 @ 2008-07-11 at 17:56

    用了它,FF line-height失效

  11. aoao @ 2008-07-13 at 18:22

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

  12. 羽中 @ 2008-07-19 at 00:12

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

  13. Pingback: firefox实现ie下的text-overflow:ellipsis效果 | 歪批 | 讨论网站开发的博客

  14. zoloadang @ 2008-07-26 at 17:26

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

  15. chensulong @ 2008-08-15 at 08:41

    先保存下来了

  16. haha @ 2008-10-20 at 18:54

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

  17. 电脑维护网 @ 2009-02-01 at 14:23

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

  18. 14px @ 2009-03-21 at 22:06

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

  19. slowsay @ 2009-03-30 at 10:30

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

    • aoao @ 2009-03-30 at 13:00

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

  20. Pingback: Firefox实现text-overflow:ellipsis « OnlyLonely & Marshall’s

  21. Pingback: 十四像素 » 表格外观的无序列表

  22. xiaohuixiongya @ 2009-12-02 at 10:54

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

  23. 小魁天下 @ 2010-01-03 at 13:29

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

  24. 别超 @ 2010-04-06 at 16:39

    为什么没我的没出出来点点点呢

    • aoao @ 2010-04-06 at 23:47

      只能说。再检查一下。比如是不是firefox2之类的。。不出来总是会有原因的

  25. pizn @ 2010-04-11 at 23:14

    学习了。

  26. hugh @ 2010-10-25 at 14:55

    好像在子元素继承上还是不行
    比如一个TD元素的class是ellipsis
    他有一个子元素DIV
    这个DIV无法继承TD的ellipsis
    DIV的文字不是ellipsis

  27. 塘沽无 @ 2010-12-25 at 13:21

    这个在火狐里面虽然能见效,但是原来定义的行高不起作用了。删掉-moz-binding:url(‘ellipsis.xml#ellipsis’); 就正常。但是省略号没了。。

  28. Pingback: 米润 » 运用项目列表创建出完美的表格样式_专注用户体验研究和前端设计

  29. 攻城狮1853 @ 2011-11-28 at 18:27

    我没有省略号啊,哪里搞错了?XP+FF4.0

  30. Pingback: 表格外观的无序列表 | ued资源分享站

发表评论

(必填)

(必填)