如何判断 HTML 元素的内容是否溢出？

给定一个 HTML 元素，任务是使用 JavaScript 确定其内容是否溢出。

方法：

• 选择要检查表单溢出的元素。
• 检查其 style.overflow 属性，如果它是“可见的”，则该元素被隐藏。
• 此外，检查其 clientWidth 是否小于 scrollWidth 或 clientHeight 是否小于 scrollHeight 则元素溢出。

示例 1：在此示例中，检查段落（

元素）的内容是否溢出。

 
 
     
         
            How to determine the content of
            HTML elements overflow or not
        
          
        
            #GFG_UP {
                font-size: 16px;
                font-weight: bold;
                border: 1px solid black;
                height: 20px;
                width: 200px;
                margin: 0 auto;
            }
        
     
      
    
           
         
            GeeksForGeeks 
         
          
        
          
        
          
         
            Click here
        
          
        
        
          
        
            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;
            }         
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：这与前面的示例相同，但此处段落（

元素）的内容没有溢出，因此示例检查并显示所需的输出No Overflow 。

 
 
     
         
            How to determine the content of
            HTML elements overflow or not
        
          
        
            #GFG_UP {
                font-size: 16px;
                font-weight: bold;
                border: 1px solid black;
                height: 20px;
                width: 200px;
                margin: 0 auto;
            }
        
     
      
    
           
         
            GeeksForGeeks 
         
          
        
          
        
          
         
            Click here
        
          
        
        
          
        
            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;
            }         
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：