CSS "text-overflow: ellipsis;" finally landed in Gecko

"text-overflow: ellipsis" is a great start, but it's really too bad it only applies to individual lines of text (via "white-space: nowrap").<p>it would be very useful if we had a property to truncate text when it reaches the end of a container with a fixed height. so if the container is 3.5 lines tall, 3 lines should be shown with an ellipsis at the last character. bonus points if we can specify a separator, so that the ellipsis will only be applied after the last whole word (space), line (line break), or just character.

Next up: "text-align: centaur" (<a href="http://textaligncentaur.com" rel="nofollow">http://textaligncentaur.com</a>).

Yep, that means that every major browser (including IE6!) supports it now. As soon as FF6 has spread, we can begin to make real use of it :).

There is a way to get this working before FF5, it just involves a weird hack with an XML file.<p><a href="http://mattsnider.com/css/css-string-truncation-with-ellipsis/" rel="nofollow">http://mattsnider.com/css/css-string-truncation-with-ellipsi...</a><p>Yay for not needing this down the road.

Awesome! I've always felt dirty fixing text-overflow (more often than not a cosmetic fix) on the backend, albeit it's not often feasible to create web sites where content and presentation are truly separated.

jQuery Mobile makes extensive use of this (though I've turned it off on a mobile app I'm making).<p>CanIUse shows that Firefox is the last browser to support ellipsis [1] and comparing Firefox 7 to Chrome 14 [2] shows a few other things that some web developers would like.<p>Firefox also has quite a long way to go on HTML5 forms [3].<p>[1] <a href="http://www.caniuse.com/#search=overflow" rel="nofollow">http://www.caniuse.com/#search=overflow</a> [2] <a href="http://www.caniuse.com/#compare=y&#38;b1=firefox+7&#38;b2=chrome+14" rel="nofollow">http://www.caniuse.com/#compare=y&#38;b1=firefox+7&#38;b2=ch...</a> [3] <a href="http://wufoo.com/html5/" rel="nofollow">http://wufoo.com/html5/</a>

Unfortunately it will have to wait for FF7 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312156&#38" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=312156&#38</a>;

I've been missing this feature in HTML for so long when making tables/overviews. Great to hear it's finally implemented.