HTML text-overflow ellipsis detection

Try this JS function, passing the span element as argument:

function isEllipsisActive(e) {     return (e.offsetWidth < e.scrollWidth);}

Once upon a time I needed to do this, and the only cross-browser reliable solution I came across was hack job. I'm not the biggest fan of solutions like this, but it certainly produces the correct result time and time again.

The idea is that you clone the element, remove any bounding width, and test if the cloned element is wider than the original. If so, you know it's going to have been truncated.

For example, using jQuery:

var $element = $('#element-to-test');var $c = $element           .clone()           .css({display: 'inline', width: 'auto', visibility: 'hidden'})           .appendTo('body');if( $c.width() > $element.width() ) {    // text was truncated.     // do what you need to do}$c.remove();

I made a jsFiddle to demonstrate this, http://jsfiddle.net/cgzW8/2/

You could even create your own custom pseudo-selector for jQuery:

$.expr[':'].truncated = function(obj) {  var $this = $(obj);  var $c = $this             .clone()             .css({display: 'inline', width: 'auto', visibility: 'hidden'})             .appendTo('body');  var c_width = $c.width();  $c.remove();  if ( c_width > $this.width() )    return true;  else    return false;};

Then use it to find elements

$truncated_elements = $('.my-selector:truncated');

Demo: http://jsfiddle.net/cgzW8/293/

Hopefully this helps, hacky as it is.

Adding to italo's answer, you can also do this using jQuery.

function isEllipsisActive($jQueryObject) {    return ($jQueryObject.width() < $jQueryObject[0].scrollWidth);}

Also, as Smoky pointed out, you may want to use jQuery outerWidth() instead of width().

function isEllipsisActive($jQueryObject) {    return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth);}