Check if an element's content is overflowing?

Asked
Active3 hr before
Viewed126 times

6 Answers

elementcheckcontent
90%

Also, check if its clientWidth is less then scrollWidth or clientHeight is less then scrollHeight then the element is overflowed.,Select the element to check form overflow.,Check its style.overflow property, if it is ‘visible’ then the element is hidden.,How to determine the content of HTML elements overflow or not ?

88%

If you are using jQuery, you might try a trick: make outer div with overflow: hiddenand inner div with content. Then use .height() function to check if height of the inner div is greater than the height of the outer div. I'm not sure it will work but give it a try.,Here is a fiddle for determining whether an element has been overflowed using a wrapper div with overflow:hidden and JQuery height() to measure the difference between the wrapper and an inner content div.,I made a multipart codepen demonstrating the above answers ( e.g. using overflow hidden and height) but also how you would expand / collapse overflowed items, Wow, this even works e.g. in a grid, where the bounding client rect doesn’t include overflowing content. – Sebastian Simon May 24 at 6:15

The element may be overflown vertically, horizontally or both. This function will return you a boolean value if the DOM element is overflown:

function isOverflown(element) {
   return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
function isOverflown(element) {
   return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
   var el = els[i];
   el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
   console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}
.demos {
   white - space: nowrap;
   overflow: hidden;
   width: 120 px;
   border: 3 px solid black;
}
<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

ES6 example:

const isOverflown = ({
   clientWidth,
   clientHeight,
   scrollWidth,
   scrollHeight
}) => {
   return scrollHeight > clientHeight || scrollWidth > clientWidth;
}
load more v
72%

// 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;
}
load more v
65%

Unwanted overflow in web design,As with scroll, you get a scrollbar in the scrolling dimension whether or not there is enough content to cause a scrollbar.,If you only want scrollbars to appear when there is more content than can fit in the box, use overflow: auto. This allows the browser to determine if it should display scrollbars.,Overflow is what happens when there is too much content to fit in a container. In this guide you will learn what overflow is and how to manage it.

load more v
75%

What’s the easiest way to detect if an element has been overflowed?,If you want to show only an identifier for more content, then you can do this with pure CSS. I use pure scrolling shadows for this. The trick is the use of background-attachment: local;. Your css looks like this:,Is there an easy way to detect overflow, or is there a better method?, Set some styles if an element is followed by an element with same attribute

.scrollbox {
   overflow: auto;
   width: 200 px;
   max - height: 200 px;
   margin: 50 px auto;

   background:
      /* Shadow covers */
      linear - gradient(white 30 % , rgba(255, 255, 255, 0)),
   linear - gradient(rgba(255, 255, 255, 0), white 70 % ) 0 100 % ,

   /* Shadows */
   radial - gradient(50 % 0, farthest - side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
   radial - gradient(50 % 100 % , farthest - side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100 % ;
   background:
      /* Shadow covers */
      linear - gradient(white 30 % , rgba(255, 255, 255, 0)),
   linear - gradient(rgba(255, 255, 255, 0), white 70 % ) 0 100 % ,

   /* Shadows */
   radial - gradient(farthest - side at 50 % 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
   radial - gradient(farthest - side at 50 % 100 % , rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100 % ;
   background - repeat: no - repeat;
   background - color: white;
   background - size: 100 % 40 px,
   100 % 40 px,
   100 % 14 px,
   100 % 14 px;

   /* Opera doesn't support this in the shorthand */
   background - attachment: local,
   local,
   scroll,
   scroll;
}
load more v
40%

visible: content is not clipped when it proceeds outside its box. This is the default value of the property,How to change the scrollbars color?,If an element needs to have scrollbars appended to honor the overflow value, Firefox puts them outside the element, keeping the visible width/height as declared. IE puts the scrollbars inside, keeping the overall width/height as declared.,The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you’ve explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you set the overflow value to hidden, the image will cut off at 200px.

The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you’ve explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you set the overflow value to hidden, the image will cut off at 200px.

div {
   overflow: visible | hidden | scroll | auto | inherit
}

It’s also possible to manipulate the overflow of content horizontally or vertically with the overflow-x and overflow-y properties. For example in the demo below the horizontal overflow can be scrolled through whilst the text that extends beyond the height of the box is hidden:

.box {
   overflow - y: hidden;
   overflow - x: scroll;
}
load more v

Other "element-check" queries related to "Check if an element's content is overflowing?"