HTML text-overflow ellipsis detection

Question

I have a collection of block elements on a page. They all have the CSS rules white-space, overflow, text-overflow set so that overflowing text is trimmed and an ellipsis is used.

However, not all the elements overflow.

Is there anyway I can use javascript to detect which elements are overflowing?

Thanks.

Added: example HTML structure I am working with.

<td><span>Normal text</span></td> <td><span>Long text that will be trimmed text</span></td> 

The SPAN elements always fit in the cells, they have the ellipsis rule applied. I want to detect when the ellipsis is applied to the text content of the SPAN.

Answer 1

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

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