I'm trying to detect (via javascript) when text-overflow is in effect. After much research, I have a working solution, except in any version of Firefox:
http://jsfiddle.net/tonydew/mjnvk/
If you adjust the browser so that the ellipsis is applied, Chrome, Safari, even IE8+ will alert that the ellipsis is active. In Firefox (every version I have tried, including 17 and 18) not so much. Firefox will always tell you ellipsis is NOT active.
The console.log() output shows why:
Firefox (OS X):
116/115 - false
347/346 - false
Chrome (OS X):
116/115 - false
347/851 - true
In Firefox, scrollWidth is never greater than offsetWidth.
The closest thing I can find to a solution is "Why are IE and Firefox returning different overflow dimensions for a div?" but I am already using the proposed solution.
Can anyone shed some light on how to make this work in Firefox too please?
EDIT: In addition to @Cezary answer below, I found a method thay does not require changes to the markup. However, it is doing a little more work because it temporarily clones each element to do the measurement against:
$(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/
Anybody have a comment on the efficiency of this? If I have a page of many potential overflow elements, is this going to have negative effects? I'd like to avoid modifying existing markup if I can, but not at the expense of excessive JS processing on each page load.