thoughts

text-overflow: ellipsis for firefox

2008-06-30 modified: 2008-07-01

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>

comment

Gappa (2008-07-11)

Good one.

One drawback so far - the cropped text cant be selected. Can that be fixed somehow?

Bevan Collins (2008-07-23)

Thanks for this... just what I needed

Evora (2008-07-30)

Thanks! A step in the right direction, at least (and at last).

Fernando (2008-08-20)

Finally something that works as expected... Thanks!!!!