0

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 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.

Sparky
  • 98,165
  • 25
  • 199
  • 285
MrRay
  • 952
  • 2
  • 10
  • 16
  • 1
    To help us (by that I mean: me) understand, can you provide a [jsFiddle example](http://jsfiddle.net/) showing `text-overflow` working normally in supported browsers, and how it `"truncates the text abruptly"` in Firefox? – thirtydot May 24 '11 at 22:33
  • 1
    @thirtydot: I'd imagine it's something like this: [JS Fiddle](http://jsfiddle.net/davidThomas/HJmZP/), wherein the first `div` has `text-overflow: hidden;` and the second has merely the `overflow: hidden;` property. – David Thomas May 24 '11 at 22:52
  • Actually ellipses works in Safari/Chrome as well. Firefox is the odd man out here. The real issue is that you don't have font-metrics available in any browser. Your best bet would be to drop an opaque layer on top of the text in firefox (positioned bottom-right)... but you'll wind up with with half-hidden letters. If you post a fiddle or something with your base code, somebody might craft something up. – John Green May 24 '11 at 22:53
  • @david Thomas - I think yo mean `text-overflow:ellipses` vs. `text-overflow:hidden`. – John Green May 24 '11 at 22:54
  • David, that's exactly the type of behavior I am referring to. – MrRay May 24 '11 at 22:56
  • @John, there's a typo in your `text-overflow` (it's `ellipsis`). Otherwise, no: `text-overflow` is automatically `hidden` if the containing element's `overflow` is set to `hidden`. Though, to be honest, it works either way. – David Thomas May 24 '11 at 22:58
  • @David - Yes, sorry. Got it confused with the plural in my own head. – John Green May 24 '11 at 23:00
  • @John, not a problem at all :) – David Thomas May 24 '11 at 23:01
  • @MrRay - Start something and somebody will probably finish it for you. It is a bit too involved and requires too many assumptions to craft from wholecloth. However, my recommendation is to not do it. There isn't a 'good' solution. : ) – John Green May 24 '11 at 23:01

1 Answers1

1

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.

Karl Nicoll
  • 16,090
  • 3
  • 51
  • 65
  • Thank @KarlNicoll. I was really hoping to stay away from a javascript solution, but there may be no way around it until Firefox comes around and supports it. – MrRay May 24 '11 at 23:12
  • Actually it's already added in Firefox, but not sure when it will be in a public build. Probably in Firefox 6. – Lea Verou May 25 '11 at 12:32
  • @Lea Verou - That's great news, I wasn't aware it was even being worked on. The MDC documentation on `text-overflow` just says "Unimplemented". – Karl Nicoll May 25 '11 at 20:46
  • I can confirm it's supposed to be Firefox 6, see: https://bugzilla.mozilla.org/show_bug.cgi?id=312156 – thirtydot May 25 '11 at 22:44
  • @thirtydot - Thanks for the information, that's good to know, although it is a little disconcerting that it's been on BZ for nearly 5 years :-P – Karl Nicoll May 26 '11 at 09:18