Question

我有一个包含数据的表，我不想将其包装到多行上，因此这是应用于单元格的CSS：

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

这很好用但是，我想向用户显示包含该单元格的完整内容的工具提示，但是如果隐藏了一些溢出的文本，则只显示。因此，我需要一种编程方式来判断是否正在进行裁剪/截断。

在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 */ }块内溢出的单元格定义自定义行为。

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

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

Answer 2

问题似乎在于FF如何解释表格单元格。如果将溢出值更改为“自动”或“滚动”，则显示为“溢出：可见”，这将不会返回适当的scrollWidth。这不会发生在Chrome中。

如果将显示类型更改为“display：block”，则会返回正确的滚动条和滚动宽度，但显然会丢失表格布局。

您可以使用以下样式将单元格的内容包装在另一个标记中：

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

因为我有here。

这可以在标记中完成，也可以在计算时动态完成。

我知道这不是一个很好的解决方案 - 但我不知道有任何显示设置来解决这个问题（使用firebug循环选项）。

希望这在某种程度上有所帮助

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

2 个答案: