Simulate text-overflow: ellipsis in CSS2

Question

Is there any way to simulate text-overflow: ellipsis using CSS2?

I found this solution that emulates text-overflow:ellipsis in firefox with CSS but it's not working.

I'm not interested in a JavaScript solution.

Answer 1

There really isn't a satisfactory way in CSS to achieve the same result as text-overflow without actually using text-overflow. There have been a few attempts, but nothing really works.

The only working non-Javascript solution I've seen was one which used -moz-binding in the stylesheet to attach a block of XUL code to the element, which did the ellipsis. This worked quite well (barring a few side-effects) in Firefox 3.x, but no longer works in Firefox 4 and above, as they dropped support for the binding feature due to security considerations.

The good news is that text-overflow is being introduced into Firefox, and should arrive with FF7 (due later this year thanks to their accelerated release cycle). It's still a little way to wait, but at least we know it's coming now.

In the meanwhile, Firefox 4/5/6 remains the only major browser where you simply cannot get a working ellipsis in CSS, and without any good alternative

One creative solution I've seen was to use a gradient transparency effect on the right hand end of the text element, to produce a fade-out effect instead of using an ellipsis. This is a different look, but provides the same kind of visual cues that an ellipsis does, and it is possible to achieve it in most browsers (although you may prefer to make it specific to Firefox and continue using the ellipsis for all others).

Hope that helps.

By the way, you might also be interested in this question I asked a few months ago where it was discussed at length: text-overflow:ellipsis in Firefox 4? (and FF5)

Answer 2

This one seems to work everywhere except Ubuntu+Chrome: http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Compass implementation: http://compass-style.org/reference/compass/typography/text/ellipsis/