Question

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.

Answer 1

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