Tailwind CSS 溢出

此类接受 Tailwind CSS 中的多个值。它是 CSS 溢出属性的替代品。此溢出用于控制对容器来说太大的元素内容的处理方式。它告诉是剪辑内容还是添加滚动条

CSS Overflow-x和CSS Overflow-y在 CSS 中有单独的属性，

溢出类：

• 溢出自动
• 溢出隐藏
• 溢出可见
• 溢出滚动
• 溢出-x-自动
• 溢出-y-自动
• 溢出-x-隐藏
• 溢出-y-隐藏
• 溢出-x-可见
• 溢出可见
• 溢出-x-滚动
• 溢出-y-滚动 

溢出自动：它会在需要时自动添加滚动条。此类在元素的内容溢出该元素的边界时向该元素添加滚动条。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
          
        Tailwind CSS Overflow Class
          
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get? 
            This portal has been created to provide 
            well written, well thought and well 
            explained solutions for selected questions.
            An IIT Roorkee alumnus and founder of 
            GeeksforGeeks. He loves to solve programming
            problems in most efficient ways. Apart from 
            GeeksforGeeks, he has worked with DE Shaw 
            and Co. as a software developer and JIIT 
            Noida as an assistant professor. It is a 
            good platform to learn programming. It is 
            an educational website. Prepare for the 
            Recruitment drive of product based companies 
            like Microsoft, Amazon, Adobe etc with a 
            free online placement preparation course
        
    

  

输出：

溢出隐藏：溢出被剪裁，其余内容不可见。此类用于剪辑元素中超出该元素边界的任何内容。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
        Tailwind CSS Overflow Class
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get? 
            This portal has been created to provide 
            well written, well thought and well 
            explained solutions for selected questions.
            An IIT Roorkee alumnus and founder of 
            GeeksforGeeks. He loves to solve programming
            problems in most efficient ways. Apart from 
            GeeksforGeeks, he has worked with DE Shaw 
            and Co. as a software developer and JIIT 
            Noida as an assistant professor. It is a 
            good platform to learn programming. It is 
            an educational website. Prepare for the 
            Recruitment drive of product based companies 
            like Microsoft, Amazon, Adobe etc with a 
            free online placement preparation course
        
    

  

输出：

溢出可见：元素框外的内容不被剪裁和可见。此类用于防止元素内的内容被剪裁。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
        Tailwind CSS Overflow Class
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get? 
            This portal has been created to provide 
            well written, well thought and well 
            explained solutions for selected questions.
            An IIT Roorkee alumnus and founder of 
            GeeksforGeeks. He loves to solve programming
            problems in most efficient ways. Apart from 
            GeeksforGeeks, he has worked with DE Shaw 
            and Co. as a software developer and JIIT 
            Noida as an assistant professor. It is a 
            good platform to learn programming. It is 
            an educational website. Prepare for the 
            Recruitment drive of product based companies 
            like Microsoft, Amazon, Adobe etc with a 
            free online placement preparation course
        
    

  

输出：

溢出滚动：溢出被剪裁，但添加了滚动条以查看其余内容。滚动条可以是水平的或垂直的。当您需要显示滚动条时使用该类，只有在需要滚动时才会显示此实用程序。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
        Tailwind CSS Overflow Class
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：

Overflow-x：该类指定当块级元素在左右边缘溢出时是否添加滚动条、剪辑内容或显示溢出内容。

overflow-x-auto：为溢出框提供滚动机制。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
  
        Tailwind CSS Overflow-x Class
          
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：

overflow-x-hidden：用于裁剪内容，x轴不提供滚动机制。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
  
        Tailwind CSS Overflow-x Class
          
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：

溢出-x-可见：这个类不剪辑内容。内容可以呈现在左右边缘之外。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
  
        Tailwind CSS Overflow-x Class
          
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：

overflow-x-scroll：用于裁剪内容并提供滚动机制。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
  
        Tailwind CSS Overflow-x Class
          
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：

Overflow-y：该类指定当块级元素在顶部和底部边缘溢出时是否添加滚动条、剪辑内容或显示溢出内容。

overflow-y-auto：为溢出框提供滚动机制。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
          
        Tailwind CSS Overflow-y Class
          
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：

overflow-y-hidden：用于裁剪内容，y轴不提供滚动机制。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
          
        Tailwind CSS Overflow-y Class
          
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：

overflow-y-visible：该类不剪辑内容。内容可以呈现在左右边缘之外。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
        Tailwind CSS Overflow-y Class
        

            How many times were you frustrated while
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：

overflow-y-scroll：用于对内容进行剪辑，还提供了滚动机制。

句法：

...

例子：

HTML

  

    

  

    
        

            GeeksforGeeks
        
        Tailwind CSS Overflow-y Class
        

            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
        
    

  

输出：