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這種不靠譜的說法也不行,看來人家是鐵了心。