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

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

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

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

在Safari和Chrome中，我可以检查element.scrollWidth属性，如果它大于element.clientWidth，则它将被裁剪。然而，无论单元格中有多少文本，Firefox都会报告这两个单元格是相同的，边界/填充/边距的大小取决于两个像素

我在JSBin上放了一个示例，以便您自己看到。尝试调整窗口大小并查看输出

---

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

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

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

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

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

像我一样

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

据我所知，这不是一个很好的解决方案，但我不知道有什么显示设置可以绕过使用firebug的循环选项

---

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

问题似乎在于FF如何解释表格单元格。

(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 );

如果将溢出值更改为“自动”或“滚动”，则它会显示为“溢出：可见”，不会返回适当的滚动宽度。这在Chrome中不会发生

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

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

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

像我一样

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

据我所知，这不是一个很好的解决方案，但我不知道有什么显示设置可以绕过使用firebug的循环选项

希望这能有所帮助

(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元素数组传入上述函数，并为{/*addtooltip*/}块内溢出的单元格定义自定义行为

现场演示：

在实时演示中，您可以看到溢出的单元格呈红色

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

现场演示：

---

在实时演示中，您可以看到溢出的单元格呈红色。

酷+1.请注意，如果没有空格，这将不起作用，但这是不太可能的@Inrbob-不幸的是，它实际上很可能是一个数据网格，可以包含长字符串而不带空格，例如：序列号。@nickf即使在这种情况下，我也可以使它工作。我稍后再做，请继续关注：@nickf-很有趣，很高兴我提到了它！很遗憾，因为这真的很酷+1.请注意，如果没有空格，这将不起作用，但这是不太可能的@Inrbob-不幸的是，它实际上很可能是一个数据网格，可以包含长字符串而不带空格，例如：序列号。@nickf即使在这种情况下，我也可以使它工作。我稍后再做，请继续关注：@nickf-很有趣，很高兴我提到了它！很遗憾，因为这是一个非常简洁的函数，我使用了overflow:hidden而不是scroll，效果非常好。噢，groovy！很高兴它起到了作用：我使用了overflow:hidden而不是scroll，效果很好。噢，groovy！很高兴它有帮助：