Detect if text has overflowed [duplicate]

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 } 

Answer 2

You can detect whether text will fit before you display the element. So you can use this function which doesn't require the element to be on screen.

function textWidth(text, fontProp) {     var tag = document.createElement('div')     tag.style.position = 'absolute'     tag.style.left = '-99in'     tag.style.whiteSpace = 'nowrap'     tag.style.font = fontProp     tag.innerHTML = text      document.body.appendChild(tag)     var result = tag.clientWidth     document.body.removeChild(tag)     return result; } 

Usage:

if (textWidth('Text', 'bold 13px Verdana') > elementWidth) {     ... }