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:
