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.

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: https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection It's perfect and works well anywhere. So I choose this, maybe you can try, you won't disappoint. — zjalex, Apr 17 '15 at 02:17

score 268 · Accepted Answer · edited Aug 26 '15 at 20:22

268

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.

edited Aug 26 '15 at 20:22

Nathan

8,093
8
50
76

answered Sep 27 '08 at 15:55

Shog9

156,901
35
231
235

thank you Shog9... the detection routine is, i think, what i needed, because i play with overflow (hidden/visible) – Sep 27 '08 at 17:49
I have a similar question over at http://stackoverflow.com/questions/2023787/how-to-determine-if-hidden-overflow-text-is-at-top-or-bottom-of-element where I am trying to figure out what parts of the containing element have hidden overflow. – slolife Jan 07 '10 at 21:27
4

I wonder whether this will give a short flicker as the style is briefly changed? – Stijn de Witt Nov 22 '12 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). – L0j1k Feb 27 '15 at 19:07
1

Does not work in MS Edge. Sometimes content is not overflowing but `clientWidth` and `scrollWidth` differs by 1px. – jesper Dec 05 '16 at 12:21
clientWidth and scrollWidth shows zero for elements loaded using jquery div.load $('#div1').load(myUrl,function(){ var el = $('myElement'); checkOverflow(el) }); – Gk_999 Mar 12 '18 at 12:36
Put together a test case & ask a new question about that, @Gk_999 – Shog9 Mar 13 '18 at 21:46
1

Will this work for multiple line ellipsis that is achieved via the -webkit-line-clamp? https://css-tricks.com/line-clampin/ – AshD Sep 08 '18 at 03:23
1

@Shog9 - 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. – AshD Sep 08 '18 at 04:17
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. – Shog9 Sep 10 '18 at 23:47
Works, but without adding overflow:hidden – dude Nov 07 '19 at 17:33

score 21 · Answer 2 · edited Sep 12 '18 at 15:31

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

edited Sep 12 '18 at 15:31

Aliaksandr Sushkevich

11,550
7
37
44

answered Sep 27 '08 at 15:37

Chris MacDonald

5,975
4
34
35

score 6 · Answer 3 · answered Jun 08 '20 at 23:21

6

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
}

answered Jun 08 '20 at 23:21

Alynva

499
7
10

3

the child element is usually contained or shrinks to fit the parent element. How do you get around this? – CWSites Aug 31 '21 at 16:41
@CWSites if you're talking about images, try to use `object-fit: cover;` – Alynva Sep 04 '21 at 12:28
1

I'm not asking about images, just a DOM element such as a `div` or `span` – CWSites Sep 07 '21 at 02:33
Probably is because it was the `width` or `max-width` set to `100%` or `-webkit-fill-available` – Alynva Jan 06 '22 at 04:19

score 4 · Answer 4 · edited Feb 11 '23 at 13:57

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)
}

edited Feb 11 '23 at 13:57

Tyler2P

2,324
26
22
31

answered Dec 08 '22 at 20:31

chad steele

828
9
13

score 1 · Answer 5 · answered Jun 05 '19 at 16:11

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.

Determine if an HTML element's content overflows

5 Answers5

Linked

Related