How to tell if text is overflowing in a table cell in Firefox?


Tags: javascript,firefox,css

Problem :

I have a table containing data which I do not want to wrap onto more than one line, so this is the CSS applied to the cells:

td {
    white-space: nowrap;
    overflow: hidden;
}

This works fine and dandy, however, I'd like to show the users a tooltip containing the full content of that cell, but only if some overflowing text is being hidden. Therefore, I need a programmatic way to tell if the cropping/truncation is occurring.

In Safari and Chrome, I can inspect the element.scrollWidth property, and if it is larger than element.clientWidth then it is being cropped. However, no matter how much text is in the cells, Firefox always reports these two to be the same (give or take a couple of pixels for the border/padding/margin).

I've put an example together on JSBin so you can see for yourself. Try resizing your window and look at the output.

http://jsbin.com/equbo3/4

ps: For me, the solution doesn't need to work in IE, but if you know of a way for it too, please do share.



Solution :

The problem seems to be with how FF interprets table cells. If you change the overflow value to 'auto' or 'scroll' it displays as if it were 'overflow:visible' which won't return an appropriate scrollWidth. This doesn't happen in Chrome.

If you change the display type to 'display:block' you get the correct scroll bar and scroll width returned, but obviously you lose the tabular layout.

Potentially you could wrap the contents of the cells in another tag with the following styles:

newTag {
display:block; /*just in case it is not default*/
overflow:scroll;
}

as I have here.

This could be done in the markup or dynamically as you do your calculations.

It is not a great solution I know - but I don't know of any display settings to get around this (cycled through options using firebug).

Hope this helps in some way


    CSS Howto..

    How to find number of style classes defined in a CSS file

    How to make an arrow pointing down after a section in HTML/CSS

    How to have an unlimited amount of divs shown next to each other

    jQuery .css, how to translate it into Javascript

    ASP.NET: How to set the css class of a Control during DataBind?

    How to make a dropdown menu with CSS

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    How to target iPhone 3GS AND iPhone 4 in one media query?

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    simple css issue - how to change anchor inside li if li:hover

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How do I get
    margin working?

    How to include css files into compojure project?

    JavaFX How to change color of dialog/window title?

    My footer keeps moving after updating other parts of my code. How do i fix this?

    How to change a Pseudo-class style through JavaScript?

    How to align two columns of text in CSS

    How to create a rounded rectangle shape Css?

    Why is border radius not showing up in IE?

    How does the arrival of HTML5 and CSS3 affect jQuery?

    Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

    How do I scroll to s specific location in an iframe?

    How to position label text with css

    how to let -ms-grid adaptive width layout in win8 html and javascript metro app?

    How to change font size for safari and opera but not chrome in CSS file.

    How to display 20 columns in html design

    How to Center Logo in Responsive Header [closed]

    How to fix a double click on a jQuery slide up/down animation?

    How to disable the collapsing feature in twitter bootstrap 3?

    How to Change the hover image in CSS