Determine if an HTML element's content overflows

Can I make use of JavaScript to examine (regardless of scrollbars) if an HTML component has overruned its web content? As an example, a lengthy div with tiny, set dimension, the overflow building readied to noticeable, and also no scrollbars on the component.

2022-07-25 16:24:41
Source Share
Answers: 2
2022-07-25 19:07:55

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

2022-07-25 18:00:17