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 =;

   if ( !curOverflow || curOverflow === "visible" ) = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight; = curOverflow;

   return isOverflowing;

Tested in FF3, FF40.0.2, IE6, Chrome

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

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: HTML text-overflow ellipsis detection

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

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);
  elHeader.setStyle('font-size', f + 'px');

The CSS of elHeader:


Note the wrapper of elHeader sets the width of elHeader.

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