3

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.

lyuba
  • 6,250
  • 7
  • 27
  • 37

3 Answers3

2

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.

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • That's a good answer, thanks! I'll double check the issue and post the bug to them if it will still show up. As for the Firefox - in the article above there's an xml workaround to make it work. – lyuba Aug 04 '11 at 18:15
  • @lyuba - the XML-based work-around for Firefox only works in FF3.6 and earlier; FF4 and up don't support the hack. :( – Spudley Aug 04 '11 at 18:44
0

Use JS framework, if you can. The bigger is framework community the less is the chance that something doesn't behave correctly on a specific OS + browser combination.

EDIT: Here's example for how YUI normalizes text-overflow: ellipsis for all browsers:

http://yuilibrary.com/gallery/show/ellipsis

If this isn't an option, use virtual machines for verifying your app behavior on different platforms.

Michael Spector
  • 36,723
  • 6
  • 60
  • 88
  • The question has nothing to do with JavaScript, it's pure CSS. – Shauna Jun 10 '11 at 18:37
  • My answer has nothing to do with JavaScript either. I'm talking about JavaScript frameworks, like YUI, jQuery UI, which handle CSS as well. Example: http://yuilibrary.com/gallery/show/ellipsis – Michael Spector Jun 10 '11 at 18:45
  • spektom, I know about those libs, but I indeed trying to find and answer to a different question know: how to understand why the same html+css in the same browser is rendered differently on the different platforms. Probably it was not clear from the question - let me correct it. – lyuba Jun 12 '11 at 14:00
0

Use the Developer Tools on Chrome and see if there's a Debug option. I don't know about Chrome, but IE can debug it on the IE Developer Tools.

Francis Lau
  • 13
  • 7
  • Sorry, but this was not actually what I was asking about. I am not asking how to debug in general, my question is how to spot the specific cross-platform bugs, which is probably lying somewhere in the direction of how the browser renders the page and why does this differ among the platforms. – lyuba Jun 11 '11 at 18:48