CSS实现text-overflow:ellipsis的效果

适用于只有一行文字的情况.

 

.ellipsis{ text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记(...)*/ width:200px; height:50px; overflow:hidden; white-space:nowrap; }

 

text-overflow是CSS3的属性，IE6以上版本、Safari、chrome 支持。它可以带2个参数：
clip [不显示省略标记（...），而是简单的裁切];
ellipsis[当对象内文本溢出时显示省略标记（...）];

 

Firefox3出来了，仍然不支持text-overflow:ellipsis;

 

解决方法可以通过Firefox强大的XUL绑定实现如下：

-moz-binding: url('ellipsis.xml#ellipsis');

 

 绑定的XML内容如下：

<?xml version="1.0" encoding="utf-8" ?> <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这种不靠谱的说法也不行，看来人家是铁了心。