text-overflow:ellipsis in Firefox 4? (and FF5)

Question

The text-overflow:ellipsis; CSS property must be one of the few things that Microsoft has done right for the web.

All the other browsers now support it... except Firefox.

The Firefox developers have been arguing over it since 2005 but despite the obvious demand for it, they can't seem to actually bring themselves to implement it (even an experimental -moz- implementation would be sufficient).

A few years ago, someone worked out a way to hack Firefox 3 to make it support an ellipsis. The hack uses the -moz-binding feature to implement it using XUL. Quite a number of sites are now using this hack.

The bad news? Firefox 4 is removing the -moz-binding feature, which means this hack won't work any more.

So as soon as Firefox 4 is released (later this month, I hear), we're going to be back to the problem of having it not being able to support this feature.

So my question is: Is there any other way around this? (I'm trying to avoid falling back to a Javascript solution if at all possible)

[EDIT]
Lots of up-votes, so I'm obviously not the only one who wants to know, but I've got one answer so far which basically says 'use javascript'. I'm still hoping for a solution that will either not need JS at all, or at worst only use it as a fall-back where the CSS feature doesn't work. So I'm going to post a bounty on the question, on the off chance that someone, somewhere has found an answer.

[EDIT]
An update: Firefox has gone into rapid development mode, but despite FF5 now being released this feature still isn't supported. And now that the majority of users have upgraded from FF3.6, the hack is no longer a solution. The good news I'm told that it might be added to Firefox 6, which with the new release schedule should be out in only a few months. If that's the case, then I guess I can wait it out, but it's a shame they couldn't have sorted it sooner.

[FINAL EDIT]
I see that the ellipsis feature has finally been added to Firefox's "Aurora Channel" (ie development version). This means that it should now be released as part of Firefox 7, which is due out toward the end of 2011. What a relief.

Release notes available here: https://developer.mozilla.org/en-US/Firefox/Releases/7

Answer 1

Spudley, you could achieve the same thing by writing a small JavaScript using jQuery:

var limit = 50; var ellipsis = "..."; if( $('#limitedWidthTextBox').val().length > limit) {    // -4 to include the ellipsis size and also since it is an index    var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);     trimmedText += ellipsis;    $('#limitedWidthTextBox').val(trimmedText); } 

I understand that there should be some way that all browsers support this natively (without JavaScript) but, that's what we have at this point.

EDIT Also, you could make it more neat by attaching a css class to all those fixed width field say fixWidth and then do something like the following:

$(document).ready(function() {    $('.fixWidth').each(function() {       var limit = 50;       var ellipsis = "...";       var text = $(this).val();       if (text.length > limit) {          // -4 to include the ellipsis size and also since it is an index          var trimmedText = text.substring(0, limit - 4);           trimmedText += ellipsis;          $(this).val(trimmedText);       }    }); });//EOF