HTML text-overflow ellipsis detection

javascript html css ellipsis
deanoj picture deanoj · Oct 12, 2011 · Viewed 99.5k times · Source

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

Italo Borssatto picture Italo Borssatto · Apr 4, 2012

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

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

Related questions

HTML - how can I show tooltip ONLY when ellipsis is activated

I have got a span with dynamic data in my page, with ellipsis style. .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; I'd like to …

Read More
CSS word ellipsis ('...') after one or two lines

I'm trying to create a word-wrap in JavaScript using CSS, and the condition is: If DIV contains one very long word, such as "asdasfljashglajksgkjasghklajsghl", I want to display: |asdasfljashglajk...| If DIV contains a long sentence, such as "if i had …

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More