javascript - 检测 CSS 文本溢出 : ellipsis in Firefox

Question

我正在尝试(通过 javascript)检测文本溢出何时生效。经过大量研究，我有一个可行的解决方案，但在任何版本的 Firefox 中除外:

http://jsfiddle.net/tonydew/mjnvk/

如果您调整浏览器以便应用省略号，Chrome、Safari、甚至 IE8+ 都会提醒省略号处于事件状态。在 Firefox 中(我尝试过的每个版本，包括 17 和 18)就没有那么多了。 Firefox 会始终告诉您省略号未激活。

console.log() 输出显示原因:

Firefox (OS X):
116/115 - false
347/346 - false

Chrome (OS X):
116/115 - false
347/851 - true 

在 Firefox 中，scrollWidth 永远不会大于 offsetWidth。

我能找到的最接近解决方案的是“Why are IE and Firefox returning different overflow dimensions for a div?”，但我已经在使用建议的解决方案。

任何人都可以阐明如何在 Firefox 中实现这一点吗？

---

编辑:除了下面的@Cezary 回答之外，我发现了一种不需要更改标记的方法。但是，它会做更多的工作，因为它会临时克隆每个元素以针对以下对象进行测量:

$(function() {
    $('.overflow').each(function(i, el) {
        var element = $(this)
                      .clone()
                      .css({display: 'inline', width: 'auto', visibility: 'hidden'})
                      .appendTo('body');

        if( element.width() > $(this).width() ) {
            $(this).tooltip({
                title: $(this).text(),
                delay: { show: 250, hide: 100 },
            });
        }
        element.remove();
    });
});

http://jsfiddle.net/tonydew/gCnXh/

有人对此的效率发表评论吗？如果我有一个包含许多潜在溢出元素的页面，这会产生负面影响吗？如果可以，我想避免修改现有标记，但不会以每次页面加载时过多的 JS 处理为代价。

Answer 1

你需要在每个 td 中添加 div 以使其在 firefox 中工作，

<td class="first"><div>Here is some text</div></td>
<td class="second">
     <div>Here is some more text. A lot more text than
     the first one. In fact there is so much text you'd think it was a 
     waste of time to type all ofit.
     </div>
</td>

CSS

td div {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow:hidden;
   width:100%;
}

Jsfiddle

http://jsfiddle.net/mjnvk/7/