

CSS "text-overflow: ellipsis;" finally landed in Gecko - thomasbachem
https://bugzilla.mozilla.org/show_bug.cgi?id=312156&

======
treyp
"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").

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.

~~~
blago
I agree, it would be a lot more useful. Safari has an unsupported property
(-webkit-line-clamp) that goes a little further but still limited. The fact
that none of the browsers provides a way (no even vendor-prefixed) to do it
makes me think that there are big technical hurdles.

I needed this desperately for a project I worked on last fall and ended up
writing tons of JS which felt oh so wrong. Newspapers and magazines would LOVE
to have that. Especially on mobile Safari. Especially on tablets.

~~~
DougWebb
I imagine it's simply complex. Part of the box model involves expanding
containers to fit the content within them, and properties like float,
overflow, width, and height run counter to that. So what do you do with
"expand this div to fit the text it contains, but also allow the text to be
truncated if it doesn't fit, and remember to leave room for the ellipses"?

When you get into fancier concepts like truncating a set of lines, or only at
certain word/phrase/sentence boundaries, you're into desktop publishing
typesetting. To do that properly you're not just truncating when the container
overflows, you're also adjusting the spacing between words and letters to make
every line look consistent and to get as much of the text to fit neatly as you
can. There aren't many pieces of software that professionals trust to do that
well, and the ones that exist are expensive. We're not likely to see those
algorithms getting into everyone's browser.

~~~
dspillett
_> and remember to leave room for the ellipses_

As long as the container is at least wide enough for one ellipses you
shouldn't need to leave room: once you've decided where to place all the text,
where an ellipses is needed overwrite the area with what would otherwise be
the background and add the dots.

Though I suppose that might not be desirable as it would result in partial
characters. A little more hassle (but not much) would be to work back until
the end of the next whole character.

But other than that you are right: the difficulty won't be rendering the
ellipsis it will be in deciding what to do when the (implicit or explicit, and
quite possibly deeply nested) "make this all fit if you can" and "truncate
this if you need to" directives overlap - that could get quite hairy, if you
want to get something that looks nice for most conceivable combinations.

------
igorw
Next up: "text-align: centaur" (<http://textaligncentaur.com>).

------
thomasbachem
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 :).

~~~
wladimir
It's just a cosmetic feature, so you can use it already. Older browsers won't
show the ellipsis in that case but who cares. Graceful fallback is automatic.

------
zachrose
There is a way to get this working before FF5, it just involves a weird hack
with an XML file.

[http://mattsnider.com/css/css-string-truncation-with-
ellipsi...](http://mattsnider.com/css/css-string-truncation-with-ellipsis/)

Yay for not needing this down the road.

~~~
cypherpunks01
That was one of the craziest hacks I've ever used on a production site. Glad
this is finally implemented..

~~~
eswat
Ditto. Had flashbacks of fixing stuff for IE6 that day.

------
gurraman
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.

------
dave1010uk
jQuery Mobile makes extensive use of this (though I've turned it off on a
mobile app I'm making).

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.

Firefox also has quite a long way to go on HTML5 forms [3].

[1] <http://www.caniuse.com/#search=overflow> [2]
[http://www.caniuse.com/#compare=y&b1=firefox+7&b2=ch...](http://www.caniuse.com/#compare=y&b1=firefox+7&b2=chrome+14)
[3] <http://wufoo.com/html5/>

------
nddrylliog
Unfortunately it will have to wait for FF7
[https://bugzilla.mozilla.org/show_bug.cgi?id=312156&](https://bugzilla.mozilla.org/show_bug.cgi?id=312156&);

~~~
cpr
6 months from now. ;-)

~~~
asadotzler
3 months 1 week from now, actually.

~~~
sp332
Do you mean in beta or something? I though FF6 would be released in 3 months,
FF7 three more after that.

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

~~~
Hovertruck
Firefox is the only major browser that hasn't supported this. It even works in
IE6.

~~~
wladimir
Then I learned something new :)

