检测CSS文本溢出: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.

我能找到最接近解决方案的是" 为什么IE和Firefox会为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/