Determine if an HTML element’s content overflows

by

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.

More Related Contents:

  1. Input type="text" with select functionality after clicking on Input type="text"
  2. How to force browser to show image 3 inches wide?
  3. Syntax Higlighter For Site [closed]
  4. how i can connect and login in mysql localhost in php by using this html code
  5. how to proportionally scale a div with images inside?
  6. How to create a tag with Javascript?
  7. Hide text in html which does not have any html tags [duplicate]
  8. Clear icon inside input text
  9. How to connect HTML Divs with Lines? [duplicate]
  10. Why is deprecated and what is the best alternative?
  11. input type=file show only button
  12. Detecting that the browser has no mouse and is touch-only
  13. Position fixed not working in mobile browser
  14. how to disable DIV element and everything inside [duplicate]
  15. How Do I Stop My Web Content From Shifting Left When The Vertical Scrollbar Appears? Roll-Up of Advice 2017 [duplicate]
  16. Load HTML page dynamically into div with jQuery
  17. Possible to associate label with checkbox without using “for=id”?
  18. jQuery position DIV fixed at top on scroll
  19. How to define the css :hover state in a jQuery selector?
  20. Why does querySelector only select the first element and how can I fix this?
  21. Extracting text from a contentEditable div
  22. How to create a collapsing tree table in html/css/js?
  23. Prevent iOS bounce without disabling scroll ability
  24. How to remove jQuery Mobile styling?
  25. IE6 Hover Issue
  26. How to get CSS class property in Javascript?
  27. How to keep elements non-refreshed
  28. How do you swap DIVs on mouseover (jQuery)?
  29. How to get a leaflet map canvas to have a 100% height?
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment