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

0 0 2 minutes read

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>                     