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:


+展开
-CSS
  .ellipsis {text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');}


+展开
-HTML
<?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属性让我们简单搞定一大堆问题呢。


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

摘自:http://www.aoao.org.cn/blog/2008/07/firefox-text-overflow-ellipsis/

加支付宝好友偷能量挖...


评论(0)网络
阅读(130)喜欢(1)HTML/CSS兼容/XML