firefox实现text-overflow:ellipsis的效果

firefox不支持text-overflow一直让人很折腾。。

firefox通过XUL实现text-overflow:ellipsis的效果（摘自嗷嗷）：

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');
}

XML：

<?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原来是那样强。。除了可以点点点掉后面的。。还可以点点点前面或者中间部分的。。

hedger悄悄的也实现一样的功能Hacking text-overflow for Firefox，不过还是感觉用XBL简洁方便，具体如下（摘自嗷嗷）：

text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;

别兴奋了，该支持的都支持，其他都是骗小朋友滴。基本非IE的浏览器的私有属性都会以-xxx-这样开始，-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。

并不是说像-moz-text-overflow现在有用，而是一个幻想的写法，当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作用

这段代码是在css3.info上看到的，以前是没这样写滴，不知道是什么时候改的。

Firefox实现text-overflow的也有差不多行滴，一个是JS+XBL，另一个CSS的:after 的，以前在试着写用xbl来监视文本的宽度的配合:after，不用想就知道我是失败的，如果单XBL可以行的话，别人也不用配合JS来写了。

PS：其实呢，IE&Opera呢，直接用text-overflow：ellipsis；就可以实现了，而firefox我见过最BT的做法，就是通过设置宽度width，再使用一张三点（“…”）的图片添加在设置了padding-right后的列表或者链接后面，超级简单，比较推荐这种做法。不过，需要用哪种方法完全处于设计者的爱好了。

使用IE&Opera的童鞋可以看到效果：

是否看到我后面有三个点点点呢XXXXXXXXXXXXXXXXX

对了，如果你上面已经看到有三个…，证明你现在用的是IE或者是opera。哈。firefox可能就看不到了，只是裁切了一段文字。Safari好像也可以支持text-overflow:ellipsis;有空考证下。