Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

To determine if the content of an HTML element overflows, you can check the element’s `overflow` property in CSS. If the ‘overflow’ property is set to “hidden” or “auto,” it means the content may overflow. Additionally, you can inspect the element’s dimensions using the `clientWidth`, `clientHeight`, `scrollWidth`, and `scrollHeight` properties in JavaScript. If the content exceeds the client dimensions, it overflows.

In this article, we will see how to determine whether its content is overflowing or not using JavaScript.

Approach:

  • Select the element to check for overflow.
  • Check its style. overflow property, if it is ‘visible’ then the element is hidden.
  • Also, check if its clientWidth is less than scrollWidth or clientHeight is less than scrollHeight then the element is overflowed.

Example 1: Check whether the content of paragraph (<p> element) is overflowed or not.

html

<!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>
            let el_up = document.getElementById("GFG_UP");
            let el_down = document.getElementById("GFG_DOWN");
            let str = "Click on button to check OverFlow";
             
            el_up.innerHTML = str;
             
            function check(el) {
                let curOverf = el.style.overflow;
                 
                if ( !curOverf || curOverf === "visible" )
                    el.style.overflow = "hidden";
                 
                let 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:

aqs

Example 2: 

This is same as previous , but here the content of paragraph (<p> element) is not overflowed, so the example checks and display the desired output No Overflow.

html

<!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>
            let el_up = document.getElementById("GFG_UP");
            let el_down = document.getElementById("GFG_DOWN");
            let str = "Click on button to check";
             
            el_up.innerHTML = str;
             
            function check(el) {
                let curOverf = el.style.overflow;
                 
                if ( !curOverf || curOverf === "visible" )
                    el.style.overflow = "hidden";
                 
                let 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:

aas



Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads