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

Propagate

fwiw, other awesome things Microsoft did for the web: AJAX, innerHTML, copying JavaScript with enough fidelity that it actually was the same language across different browsers, even if the APIs weren't exactly the same, IE6 – Braasch

@sdleihssirhc: the IE5.5 -> IE6 transition was indeed a revolution. You're one of the few people I've seen that publicly recognise that ;). – Coriss

@Coriss Yeah, I'm pretty open-minded and prophetic and sharp and intelligent like that. – Braasch

@Coriss & @sdleihssirhc: Point well made, and I agree - IE6 was good in its day. My issues with IE6 are not with how good it was at the time, but how it caused 10 years of stagnation on the web. But this isn't the place to get into a debate over the good or evil of IE. :-) There's plenty of other places to go for that. In the meanwhile, I'm still frustrated with the Firefox developers for being stubborn over the ellipsis. – Propagate

Unfortunately for now there's no CSS solution. The fallback solution that I use, modernizr doesn't have the test for this property as well. You can check if the UserAgent is Firefox and load the javascript instead of the CSS – Rowan

To show support for this, you can vote for the bug on Bugzilla: implement text-overflow: ellipsis from CSS3 text though I don't know how much difference it will make since there are lots of other things being worked on for the upcoming Firefox 4 release. – Firefly

Firefox 6 will support text-overflow:ellipsis: bugzilla.mozilla.org/show_bug.cgi?id=312156 – Barnsley

@YuriKolovsky - Nope: developer.mozilla.org/en/CSS/… – Arawak

FF7 is out. Download and enjoy! – Nutshell

@Braasch Microsoft only did those things because it had to compete. They did nothing once the competition had been eliminated. The pain that IE has caused me will not easily be forgotten. – Amylose

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

Screech

I've given you +1, but I'm hesitant to accept a Javascript solution unless there's nothing else possible. I'll wait a bit longer to see if I get any other answers. If JS is the only option, then it would be good to have one that plays nicely with text-overflow:ellipsis; so I can still use the CSS option in other browsers. – Propagate

In the absence of any other working solution, I'll have to reluctantly accept this one. I'll modify it so that it only runs in Firefox, so I can use the CSS feature in other browsers. Here's hoping that the Mozilla guys can get ellipsis implemented for FF5. Thanks for the help. – Propagate

Shouldn't length() be length? It's a property. – Emendation

It's hard to pick a character length that works all the time, especially if you are using variable-width fonts or have increased or decreased the text size in the browser. – Marine

Answer 2

EDIT 09/30/2011

FF7 is out, this bug is resolved and it works!

---

EDIT 08/29/2011

This issue is marked as resolved and will be available in FF 7; currently set to release on 09/27/2011.

Mark your calendars and get ready to remove all those hacks you've put in place.

OLD

I have another answer: wait.

The FF dev team is in hot pursuit to resolve this issue.

They have tentative fix set for Firefox 6.

Firefox 6!! When will that come out?!?

Easy there, imaginary, over-reactive person. Firefox is on the fast dev track. FF6 is set for release six weeks after Firefox 5. Firefox 5 is set for release June 21st, 2011.

So that puts the fix sometime in the beginning of August 2011...hopefully.

You can sign up for the mailing list following the bug from the link in the original poster's question.

Or you can click here; whichever is easiest.

Nutshell

This hacks.mozilla.org/2011/07/aurora7 implies it will be in Firefox 7, not 6. But your main point (wait) is valid either way. – Firefly

"Wait" seems to be the only realistic answer, but its a hard answer to take when your boss is demanding it. :( Fortuately the wait seems to finally be drawing to an end (although the issue will linger as long as there are people using old versions of firefox) – Propagate

Nope, it's slated for Firefox 7: developer.mozilla.org/en/CSS/… – Arawak

Answer 3

I must say I'm a little disappointed that the only browser specific hack in my application is going to be to support FF4. The above javascript solution doesn't account for variable width fonts. Here is a more verbose script that accounts for this. The big problem with this solution is that if the element containing the text is hidden when the code is run then the width of the box isn't known. This was a deal breaker for me so I stopped working on/testing it... but I thought I'd post it here in case it is of use to someone. Be sure to test it well as my testing was less than exhaustive. I intended to add a browser check to only run the code for FF4 and let all the other browsers use their existing solution.

This should be available for fiddling here: http://jsfiddle.net/kn9Qg/130/

HTML:

<div id="test">hello World</div>

CSS:

#test {
    margin-top: 20px;
    width: 68px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid green;
}

Javascript (uses jQuery)

function ellipsify($c){
    // <div $c>                 content container (passed)
    //    <div $b>              bounds
    //       <div $o>           outer
    //          <span $i>       inner
    //       </div>
    //       <span $d></span>   dots
    //    </div>
    // </div>

    var $i = $('<span>' + $c.html() + '</span>');
    var $d = $('<span>...</span>');
    var $o = $('<div></div>');
    var $b = $('<div></div>');

    $b.css( {
        'white-space' : "nowrap",
        'display' : "block",
        'overflow': "hidden"
    }).attr('title', $c.html());

    $o.css({
        'overflow' : "hidden",
        'width' : "100%",
        'float' : "left"
    });

    $c.html('').append($b.append( $o.append($i)).append($d));

    function getWidth($w){
        return parseInt( $w.css('width').replace('px', '') );
    }

    if (getWidth($o) < getWidth($i))
    {
        while (getWidth($i) > (getWidth($b) - getWidth($d)) )
        {
             var content = $i.html();
             $i.html(content.substr(0, content.length - 1));
        }

        $o.css('width', (getWidth($b) - getWidth($d)) + 'px');
    }
    else
    {
        var content = $i.html();
        $c.empty().html(content);
    }
}

It would be called like:

$(function(){
    ellipsify($('#test'));
});

Hurtful

Answer 4

I have run into this gremlin over the past week as well.

Since the accepted solution does not account for variable width fonts and wwwhack's solution has a While Loop, I will throw in my $.02.

I was able to drastically reduce the processing time of my problem by using cross-multiplication. Basically, we have a formula that looks like this:

The variable x in this case is what we need to solve. When returned as an Integer, it will give the new length that the over-flowing text should be. I multiplied the MaxLength by 80% to give the ellipses enough room to show.

Here is a full html example:

<html>
    <head>
        <!-- CSS setting the width of the DIV elements for the table columns.  Assume that these widths could change.  -->
        <style type="text/css">
            .div1 { overflow: hidden; white-space: nowrap; width: 80px; }
            .div2 { overflow: hidden; white-space: nowrap; width: 150px; }
            .div3 { overflow: hidden; white-space: nowrap; width: 70px; }
        </style>
        <!-- Make a call to Google jQuery to run the javascript below.  
             NOTE:  jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {  
                //Loop through each DIV element
                $('div').each(function(index) {
                    var myDiv = this;  //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
                    var divText = myDiv; //Variable used to obtain the text from the DIV element above  

                    //Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element.  For this example, it will always be the firstChild  
                    divText = divText.firstChild;  

                    //Create another variable to hold the display text  
                    var sDisplayText = divText.nodeValue;  

                    //Determine if the DIV element is longer than it's supposed to be.
                    if (myDiv.scrollWidth > myDiv.offsetWidth) {  
                        //Percentage Factor is just a way of determining how much text should be removed to append the ellipses  
                        //With variable width fonts, there's no magic number, but 80%, should give you enough room
                        var percentageFactor = .8;  

                        //This is where the magic happens.
                        var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
                        sliceFactor = parseInt(sliceFactor);  //Get the value as an Integer
                        sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
                        divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
                    }
                });
            });
        </script>
    </head>
    <body>
        <table border="0">
            <tr>    
                <td><div class="div1">Short Value</div></td>    
                <td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>    
                <td><div class="div3">Prince</div></td> 
            </tr>
            <tr>    
                <td><div class="div1">Longer Value</div></td>   
                <td><div class="div2">For score and seven year ago</div></td>   
                <td><div class="div3">Brown, James</div></td>   
            </tr>
            <tr>    
                <td><div class="div1">Even Long Td and Div Value</div></td> 
                <td><div class="div2">Once upon a time</div></td>   
                <td><div class="div3">Schwarzenegger, Arnold</div></td> 
            </tr>
        </table>
    </body>
</html>

I understand this is a JS only fix, but until Mozilla fixes the bug, I'm just not smart enough to come up with a CSS solution.

This example works best for me because the JS is called every time a grid loads in our application. The column-width for each grid vary and we have no control over what type of computer our Firefox users view our app (which, of course, we shouldn't have that control :) ).

Nutshell

Thanks for the answer; I'll give it a try, and I'm sure it'll be useful to others looking to solve the same issue. +1 – Propagate

Hmm, you seem to have misconfigured your text editor ;-P -- you seem to be using tabs less than 8 characters wide! – Pfister

Answer 5

This pure CSS solution is really close, except for the fact that it causes ellipsis to appear after every line.

Mons

thanks for the answer. As much as I'd like to accept a pure CSS solution, this one isn't reallw workable for me, as it requires extra markup and, as you say, it does leave the ellipsis showing when you don't want it. thanks though. I did give you +1 nevertheless. – Propagate