javascript - Finding out when a td element shows ellipsis

Question

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?

score 1 · Accepted Answer

您可以检查内容的 scrollWidth 并将其与元素的宽度进行比较。这是一个使用 jQuery 的解决方案：

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

1 回答 1