Determine if an HTML element's content overflows

Can I use JavaScript to check (irrespective of scrollbars) if an HTML element has overflowed its content? For example, a long div with small, fixed size, the overflow property set to visible, and no scrollbars on the element.

Normally, you can compare the client[Height|Width] with scroll[Height|Width] in order to detect this... but the values will be the same when overflow is visible. So, a detection routine must account for this:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";
   
   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;
   
   el.style.overflow = curOverflow;

   return isOverflowing;
}

Tested in FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

Try comparing element.scrollHeight / element.scrollWidth to element.offsetHeight / element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

I don't think this answer is perfect. Sometimes the scrollWidth/clientWidth/offsetWidth are the same even though the text is overflow.

This works well in Chrome, but not in IE and Firefox.

At last, I tried this answer: https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection

It's perfect and works well anywhere. So I choose this, maybe you can try, you won't disappoint.

Another way is compare the element width with its parent's width:

function checkOverflow(elem) {
	const elemWidth = elem.getBoundingClientRect().width
	const parentWidth = elem.parentElement.getBoundingClientRect().width

	return elemWidth > parentWidth
}

With jQuery you could do:

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

Change to .prop('scrollWidth') and .width() if needed.

This is a javascript solution (with Mootools) that will reduce the font size to fit the bounds of elHeader.

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

The CSS of elHeader:

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

Note the wrapper of elHeader sets the width of elHeader.