javascript - 如何判断 Firefox 表格单元格中的文本是否溢出？

Question

我有一个包含数据的表格，我不想将其换行到多行，所以这是应用于单元格的 CSS:

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

这工作得很好而且花花公子，但是，我想向用户显示一个包含该单元格全部内容的工具提示，但只有一些溢出的文本被隐藏了。因此，我需要一种编程方式来判断是否正在发生裁剪/chop 。

在 Safari 和 Chrome 中，我可以检查 element.scrollWidth 属性，如果它大于 element.clientWidth 则它正在被裁剪。然而，无论单元格中有多少文本，Firefox 总是报告这两者相同(边框/填充/边距有几个像素)。

我在 JSBin 上放了一个例子，你可以自己看看。尝试调整窗口大小并查看输出。

http://jsbin.com/equbo3/4

ps:对我来说，该解决方案不需要在 IE 中工作，但如果您也知道一种方法，请分享。

Answer 1

(function(t) {
    var c, h, i;

    for (i = 0; i < t.length; i++) {
        c = t[i];
        h = c.clientHeight;
        c.style.whiteSpace = 'normal';
        if ( c.clientHeight > h ) { /* add tooltip */ }
        c.style.whiteSpace = 'nowrap';
    }
})( ARRAY_OF_CELLS );

只需将 TD 元素数组传入上述函数，并为在 {/* add tooltip */} block 内溢出的单元格定义自定义行为。

现场演示: http://jsfiddle.net/nJarj/1/

在现场演示中，您可以看到溢出的单元格是红色的。