How to debug the different behavior of the same browser on the different platforms?


Tags: html,browser,cross-platform,ellipsis,css3

Problem :

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.



Solution :

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.


    CSS Howto..

    how do i change a div background when you hover over a button in another div?

    How to make rounded border in IE8 with CSS?

    How to show the text overflow after showing two lines in the div using css?

    How can I get the
    div to properly wrap my two buttons?

    How to make div position fixed without floating

    How to avoid double borders on list of divs

    How Do I Anchor tag in XSLT?

    I have a link icon next to each link. How do I exclude the link icon from images?

    a[title] not showing expected result [closed]

    How to write variable with multiple css properties in Sass

    How to make divs have table-like borders?

    How to override cloudmade maps css with your own css? [closed]

    How can I limit Bootstrap column to a specific column's height?

    How can I set a css property to tags with specific attribute?

    How to add your customise arrows in slick slider JS using CSS

    How to change default message “Please enter a value with a valid mimetype.” for HTML file input

    How to calculate percentages in LESS CSS?

    Fade in/out text slideshow

    How to get style of a div from javascript file

    How does one style element within a label say?

    How might I get an element's border color value using jQuery?

    How do i make liteAccordion (horizontal accordion plugin for jQuery) work in IE6

    AngularJS / CSS - How to set the width of a select box to a value from $scope?

    how to combine the css selector using “:not”

    How to style a single QToolButton using qss/css

    jquery/css how to rescale and crop a large image to fit my display div?

    How to highlight the table row using jquery in Rails 3?

    How can I trigger jQuery fadeIn() fadeOut() from a
    element

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

    How to remove this extra part at the right?