Gracefully degrade text-overflow CSS property

I'm using the text-overflow CSS property to get the ellipse effect, which I believe is only supported in IE as of now. My question is, I'm not looking for a work around to get it to work in Firefox, rather I am looking for a solution that gracefully degrades in other browsers instead of truncating the 开发者_JS百科text abruptly. So, instead of ellipses in Firefox, it would fallback to a normal text wrap.

Not sure if this is possible considering text-overflow is dependent on both the overflow and white-space properties...

Any help is greatly appreciated.

For IE, Safari, Chrome (and other Webkit browsers) and the latest versions of Opera, the text-overflow property is already supported. If you need support for older versions of Opera (pre-11.0), you can use the prefixed property, like this:

.ellipsis {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

Firefox (and other Gecko-based browsers) don't support the text-overflow property at all, which is disappointing because it's actually quite useful. But for Firefox, you can use some JavaScript to create the ellipsis. You can find a solution using JQuery HERE. The developer provides a demo program on his site. It's not as well implemented as a pure CSS solution, and obviously doesn't work when JS is turned off, but it's the closest you can get at this time with Firefox.

HTH.