How to make cross browser css ellipsis?

Question

I used this

p.test { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 

but it does not work in Firefox. And I did not check other browsers.

But I need a browser compatible interface

Answer 1

Firefox does not support it.

There is work for Firefox 3.x there, but it also does not work in FF4.

I was told that they plan to add support in FF6.

From this point on, there is no CSS solution that works correctly for Firefox. There are some attempts that managed to get something close, but nothing that is actually correct.

See also this question for more details: text-overflow: ellipse in Firefox 4? (and FF5)

My current solution is to abandon the ellipsis and do something else instead. I use the gradual decrease effect on the right side of the text element to give a similar visual cue to the user as an ellipsis, and it can even be combined with an ellipsis so that we can support all browsers to show some kind of effect showing text input without the need for any browsers.

UPDATE according to Ilee's answer:

Since Firefox version 7 is supported text-overflow: ellipsis . Thus, it is a cross browser for large browsers, such as starting with FF7, IE7 and Chrome.

Answer 2

This message has expired. Starting with Firefox version 7, it supports text overflow: ellipsis. Thus, it is a cross browser for large browsers like launching with ff7, IE7 and chrome.