当文本溢出生效时,我试图检测(通过
javascript).经过多次研究,我有一个工作的解决方案,除了任何版本的Firefox：
http://jsfiddle.net/tonydew/mjnvk/
如果您调整浏览器以应用省略号,则Chrome,Safari甚至IE8将提醒该省略号处于活动状态.在Firefox(每个版本,我试过,包括17和18)不是那么多. Firefox总是会告诉你省略号不活动.
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在Firefox中工作吗？
编辑：除了@Cezary回答下面,我发现一个方法thay不需要更改标记.然而,它正在做更多的工作,因为它暂时克隆每个元素来进行测量：
$(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处理每个页面的负载.
解决方法
你需要在每个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
