CODEWITHSUNDEEP
javascripthtml
M.S
M.S

Reputation: 1610

Finding out when a td element shows ellipsis

I have a table in which the cells show ellipsis if too long. I set overflow: hidden and text-overflow: ellipsis on the td elements.

I now need to show a tooltip if the user hovers a cell that can't fit the entire text, but no tooltip on other cells.

I can register an event to capture mouseover, but how can I tell if the hovered td shows ellipsis or not?

Upvotes: 2

Views: 283

Answers (1)

Jeremy Swinarton
Jeremy Swinarton

Reputation: 537

You can check the scrollWidth of the content and compare it to the width of the element. Here's a solution with jQuery:

$('td').each(function () {
    if ($(this)[0].scrollWidth > $(this).innerWidth()) {
        // Text is overflowing
    }
});

http://jsfiddle.net/AvJvW/

Upvotes: 2

Related Questions