How to determine the content of HTML elements overflow or not ?

18 Jun, 2019
Given an HTML element and the task is to determine whether its content is overflow or not using JavaScript.
Approach:
Select the element to check form overflow.
Check its style.overflow property, if it is ‘visible’ then the element is hidden.
Also, check if its clientWidth is less then scrollWidth or clientHeight is less then scrollHeight then the element is overflowed.
Example 1: In this example, check the content of paragraph (<p> element) is overflowed or not.
<!DOCTYPE HTML> <html>     <head>         <title>             How to determine the content of            HTML elements overflow or not        </title>                  <style>            #GFG_UP {                font-size: 16px;                font-weight: bold;                border: 1px solid black;                height: 20px;                width: 200px;                margin: 0 auto;            }        </style>    </head>           <body style = "text-align:center;">                   <h1 style = "color:green;" >             GeeksForGeeks         </h1>                   <p id = "GFG_UP"></p>                  <br><br>                  <button onclick = "gfg_Run()">             Click here        </button>                  <p id = "GFG_DOWN" style =             "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            var el_up = document.getElementById("GFG_UP");            var el_down = document.getElementById("GFG_DOWN");            var str = "Click on button to check OverFlow";                          el_up.innerHTML = str;                          function check(el) {                var curOverf = el.style.overflow;                                  if ( !curOverf || curOverf === "visible" )                    el.style.overflow = "hidden";                                  var isOverflowing = el.clientWidth < el.scrollWidth                    || el.clientHeight < el.scrollHeight;                                  el.style.overflow = curOverf;                                  return isOverflowing;            }                          function gfg_Run() {                ans = "No Overflow";                                  if (check(el_up)) {                    ans = "Content Overflowed";                 }                                  el_down.innerHTML = ans;            }                 </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This is same as previous example, but here the content of paragraph (<p> element) is not overflowed, so the example checks and display the desired output No Overflow.
<!DOCTYPE HTML> <html>     <head>         <title>             How to determine the content of            HTML elements overflow or not        </title>                  <style>            #GFG_UP {                font-size: 16px;                font-weight: bold;                border: 1px solid black;                height: 20px;                width: 200px;                margin: 0 auto;            }        </style>    </head>           <body style = "text-align:center;">                   <h1 style = "color:green;" >             GeeksForGeeks         </h1>                   <p id = "GFG_UP"></p>                  <br><br>                  <button onclick = "gfg_Run()">             Click here        </button>                  <p id = "GFG_DOWN" style =             "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            var el_up = document.getElementById("GFG_UP");            var el_down = document.getElementById("GFG_DOWN");            var str = "Click on button to check";                          el_up.innerHTML = str;                          function check(el) {                var curOverf = el.style.overflow;                                  if ( !curOverf || curOverf === "visible" )                    el.style.overflow = "hidden";                                  var isOverflowing = el.clientWidth < el.scrollWidth                    || el.clientHeight < el.scrollHeight;                                  el.style.overflow = curOverf;                                  return isOverflowing;            }                          function gfg_Run() {                ans = "No Overflow";                                  if (check(el_up)) {                    ans = "Content Overflowed";                 }                                  el_down.innerHTML = ans;            }                 </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.