Question

How can you detect if text has overflown? For example, the following text is longer than it’s div container allows. How can I detect this in javascript?

<div style="max-width: 100px; white-space:nowrap; overflow: hidden;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>

Answer 1

If you are using jQuery, you can try comparing the div’s width to its scrollWidth.

if ($('#div-id')[0].scrollWidth >  $('#div-id').innerWidth()) {
    //Text has over-flown
}