RK* - rikkertkoppes.com

thoughts

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

and

<?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>

See the comment from William below for Firefox 2.x.

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).

  1. firefox通过XUL实现text-overflow:ellipsis的效果 - 样式之美 [zh-CN] (791)
older articles

AdministrationAtom feed