Determine if an HTML element's content overflows

Question

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.

Casket

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: #7738617 It's perfect and works well anywhere. So I choose this, maybe you can try, you won't disappoint. – Backpack

Answer 1

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.

Inaugural

thank you Shog9... the detection routine is, i think, what i needed, because i play with overflow (hidden/visible) – Casket

I have a similar question over at #2024287 where I am trying to figure out what parts of the containing element have hidden overflow. – Spike

I wonder whether this will give a short flicker as the style is briefly changed? – Subfamily

+1. This works on modern browsers (including at least Chrome 40 and other current version browsers from the time of this writing). – Unarmed

Does not work in MS Edge. Sometimes content is not overflowing but clientWidth and scrollWidth differs by 1px. – Saleme

clientWidth and scrollWidth shows zero for elements loaded using jquery div.load $('#div1').load(myUrl,function(){ var el = $('myElement'); checkOverflow(el) }); – Monolith

Put together a test case & ask a new question about that, @Monolith – Inaugural

Will this work for multiple line ellipsis that is achieved via the -webkit-line-clamp? css-tricks.com/line-clampin – Jardine

@Inaugural - Sorry I meant to say that it is not working for the multiple line ellipsis that is achieved via the -webkit-line-clamp. I am simply doing a comparison of offsetWidth and clientWidth, and the values are the same for both regardless of whether the ellipsis is displayed. Wondering if you or someone else has made this work for multiple line ellipsis. – Jardine

I see, @AshD. You're probably going to have to dynamically drop and re-add the -webkit-line-clamp style, just as I do for the overflow style in this example. Might get a bit messy if there's no sensible default; post a new question if you run into trouble. – Inaugural

Works, but without adding overflow:hidden – Lepidus

Answer 2

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

if (element.scrollHeight > element.offsetHeight) {
  console.log('element overflows')
}

See MDN docs :

• offsetWidth
• offsetHeight
• scrollWidth
• scrollHeight

Calcification

it looks working in Chrome and Safari – Imposing

Answer 3

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
}

Otti

the child element is usually contained or shrinks to fit the parent element. How do you get around this? – Copyedit

@Copyedit if you're talking about images, try to use object-fit: cover; – Otti

I'm not asking about images, just a DOM element such as a div or span – Copyedit

Probably is because it was the width or max-width set to 100% or -webkit-fill-available – Otti

Answer 4

I didn't like any of these, so I wrote this one. Works great!

function isOverflowY(element) {
  return element.scrollHeight != Math.max(element.offsetHeight, element.clientHeight)
}

Amalee

Best answer here – Tamasha

Answer 5

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.

Burger