Question

I am trying to use the text-overflow: ellipsis technique introduced in this article:
http://mattsnider.com/css/css-string-truncation-with-ellipsis/
which works surprisingly wide across the browsers.

The problem which I notice is, however, that it’s not working correctly in the combination of Ubuntu + Chrome 11, while in the same browser on Mac it’s just fine.

So I’m curios about how to spot this kind of problems and understand the reason of the different behavior among the same browsers on the different platforms.

Answer 1

The text-overflow:ellipsis feature is notoriously difficult to detect support for. For most modern browser features, it is possible to run Javascript code which will detect whether the browser supports that feature or not (see the Modernizr project for the ultimate example of this), but unfortunately text-overflow has defeated the efforts of even the most determined feature detection script writers.

You’re therefore limited to simply finding out in advance which browsers support it and which don’t.

The CanIUse site is a good reference for this sort of thing; they’ve got browser support tables for most browser features, including text-overflow.

By the way – You’ll note from the table in that link that text-overflow is not currently supported in Firefox; you might be interested in this question: text-overflow:ellipsis in Firefox 4? (and FF5) where I asked if there were any work-arounds (the short answer is, No; we’ve just got to wait till FF7 is released).

However, they don’t differentiate between platform on their support tables; the assumption appears to be that a given browser works pretty much the same on all platforms. This is certainly not always the case. You specifically mention that you’ve had trouble with Chrome in Ubuntu but not on other platforms. I find that quite odd, since the ellipsis feature seems unlikely to have anything in it which requires specific platform support, but if it is the case, then its a good demonstration that the same browser may not always be identical across platforms.

I don’t have a specific solution for you. I hope the above might be useful for you though.

In this particular case, it does sound very strange — strange enough that it might be worth posting a bug report for Chrome if you can produce a simple test case which works in the latest Chrome for Windows or Mac but not in Linux.