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:
xul:description的crop原来是那样强。。除了可以点点点掉后面的。。还可以点点点前面或者中间部分的。。这个功能可是非常实用哦,不知道W3C虾米时候也给这样的CSS属性让我们简单搞定一大堆问题呢。
在很久很久以前,我也在研究,能不能调用firefox处理title的点点点的东东来完成效果,不过一直没实现。之前提出的-moz-text-overflow: ellipsis;via这种不靠谱的说法也不行,看来人家是铁了心。
摘自:http://www.aoao.org.cn/blog/2008/07/firefox-text-overflow-ellipsis/
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');}
-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>
<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/
加支付宝好友偷能量挖...