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.
7 Answers
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.
-
thank you Shog9... the detection routine is, i think, what i needed, because i play with overflow (hidden/visible)– andrei costacheSep 27, 2008 at 17:49
-
I have a similar question over at stackoverflow.com/questions/2023787/… where I am trying to figure out what parts of the containing element have hidden overflow.– slolifeJan 7, 2010 at 21:27
-
3I wonder whether this will give a short flicker as the style is briefly changed? Nov 22, 2012 at 12:37
-
3+1. This works on modern browsers (including at least Chrome 40 and other current version browsers from the time of this writing).– L0j1kFeb 27, 2015 at 19:07
-
1Does not work in MS Edge. Sometimes content is not overflowing but
clientWidth
andscrollWidth
differs by 1px.– jesperDec 5, 2016 at 12:21
Try comparing element.scrollHeight
/ element.scrollWidth
to element.offsetHeight
/ element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight
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
}
-
3the child element is usually contained or shrinks to fit the parent element. How do you get around this?– BatmanAug 31, 2021 at 16:41
-
@CWSites if you're talking about images, try to use
object-fit: cover;
– AlynvaSep 4, 2021 at 12:28 -
1
-
Probably is because it was the
width
ormax-width
set to100%
or-webkit-fill-available
– AlynvaJan 6, 2022 at 4:19
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.
-
I suggest to remove or unvote this answer, since it has some defect. I use this at first, but it cann't work perfect with some special css style.– zjalexApr 17, 2015 at 2:19
-
There is a difference between text overflow and HTML element overflow. The original question was in regards to HTML elements.– BatmanAug 31, 2021 at 16:10
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.
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)
}
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);
f--;
elHeader.setStyle('font-size', f + 'px');
}
The CSS of elHeader:
width:100%;
font-size:40px;
line-height:36px;
font-family:Arial;
text-align:center;
max-height:36px;
overflow:hidden;
Note the wrapper of elHeader sets the width of elHeader.
-
This has nothing to do with HTML element overflow. Also reducing the size of the font is an accessibility concern.– BatmanAug 31, 2021 at 16:10