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>

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

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

William (2008-10-11)

This doesn't seem to work in Firefox 2.x. Is there any solution to that?

William (2008-10-11)

Solved it. I added <xul:window> around <xul:description> and it works on FF2 now. (And hopefully no drawback on FF3)

Steve (2008-11-06)

Hey guys -- I have tried this solution in a simple test page with no luck. I have verified that the XML file is being read by Mozilla (I am using Firefox 2) by adding some javascript to a <constructor> section before the <content> section. The javascript does run -- so Mozilla is definitely responding to the ellipsis style in my page. The overflowing text simply runs over my div -- and never cuts off at all, let alone with an ellipsis. Has anyone else had this problem? I must be missing something...I have cut and pasted the above code exactly. Thanks for any help.

Rikkert (2008-11-11)

be sure to have overflow: hidden on the div itself. Furthermore, white-space: nowrap is essential

Katharina (2008-11-17)

do you have an url with a working sample of this feature?