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.

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

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.

250
2022-07-25 18:00:17
Source