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... Yay for not needing this down the road.
They broke that in FF4 (intentionally).
CSS "text-overflow: ellipsis;" finally landed in Gecko
21–28 of 28 posts
Re: CSS "text-overflow: ellipsis;" finally landed in Gecko
#22Re: CSS "text-overflow: ellipsis;" finally landed in Gecko
#23"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 th…
Very much so... I struggled with this last year, trying to make text reliably reach near the end of a two line space without it going to a third line and this ending without an ellipsis... without using JavaScript. CSS really does not have good text handling.
Re: CSS "text-overflow: ellipsis;" finally landed in Gecko
#24Earlier quoted context omitted.
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 magazin…
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 se…
> 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.
Re: CSS "text-overflow: ellipsis;" finally landed in Gecko
#25There 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... Yay for not needing this down the road.
I'm on FF 6.0a2 (Aurora channel) and none of those examples have ellipses for me.
Re: CSS "text-overflow: ellipsis;" finally landed in Gecko
#26Re: CSS "text-overflow: ellipsis;" finally landed in Gecko
#27I've been missing this feature in HTML for so long when making tables/overviews. Great to hear it's finally implemented.
Don't forget that it only applies the ellipsis to a single line, not a block of text! You'd assume they'd knock out both of these use cases.
Re: CSS "text-overflow: ellipsis;" finally landed in Gecko
#28Earlier quoted context omitted.
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 magazin…
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 se…
Or it can be quite simple. Note that we are talking about overflow: text that given the CSS on the page would become invisible. This knowledge is already present in the rendering subsystem because it has to decide what gets displayed.
The only trick is to open up enough space at the end of the line to render the ellipsis. It's not rocket science to do it well enough.