how to make cross browser css ellipsis?

Question

I used this

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

but it's not working on Firefox. And I didn't check on other browsers.

But I need cross browser compatibleway

Answer 1

Firefox doesn't support it.

There's a work-around for Firefox 3.x, but that also doesn't work in FF4.

I'm told that they plan to add support in FF6.

As of this moment, there is no CSS solution that works correctly for Firefox. There are some attempts that have managed to get something close, but nothing that's actually right.

For more, see also this question: text-overflow:ellipsis in Firefox 4? (and FF5)

My current solution is to give up on having an ellipsis, and do something else instead. I'm using a fade-out effect on the right-hand 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 we can support all browsers to show some kind of effect to show a text run-on without having to resort to any browser hacks.

UPDATE as per Ilee's answer:

Since Firefox version 7 text-overflow: ellipsis is supported. Thus, it is cross browsers for major browsers like start from FF7, IE7 and Chrome.