入门 CSS 布局溢出

Primer CSS 是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。

布局用于使用特定样式显示内容。例如——我们可以使用显示、浮动、对齐和其他实用程序来更改文档的布局。

Primer CSS Overflow Layout 用于设置内容的可见性溢出。可以在 x 和 y 轴上独立设置溢出。

使用类：

• .overflow-x-auto -如果需要，它用于在 x 轴上设置滚动条。
• .overflow-x-hidden -用于隐藏 x 轴溢出的内容。
• .overflow-x-scroll -用于在 x 轴上创建滚动条。
• .overflow-x-visible -用于在 x 轴上显示框外的所有溢出内容。
• .overflow-y-auto -如果需要，它用于在 y 轴上设置滚动条。
• .overflow-y-hidden -用于隐藏 y 轴溢出的内容。
• .overflow-y-scroll -用于在 y 轴上创建滚动条。
• .overflow-y-visible -用于在 y 轴上显示框外的所有溢出内容。

句法：

 Content... 

示例 1：

HTML

  

    
  
    
  
    

  

    

        

            GeeksforGeeks
        
  
        
Primer CSS Layout Overflow
  
        
Overflow-x-auto
        

            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML.is.the.combination.of.Hypertext.and.Markup.language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        
  
        
Overflow-x-hidden
        

            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML.is.the.combination.of.Hypertext.and.Markup.language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        
  
        
Overflow-x-scroll
        

            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML.is.the.combination.of.Hypertext.and.Markup.language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        
  
        
Overflow-x-visible
        

            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML.is.the.combination.of.Hypertext.and.Markup.language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        
    

  

输出：

示例 2：

HTML

  

    
  
    
  
    

  

    

        

            GeeksforGeeks
        
  
        
Primer CSS Layout Overflow
  
        
Overflow-y-auto
        

            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML is the combination of 
            Hypertext and Markup language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        
  
        
Overflow-y-hidden
        

            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML is the combination of 
            Hypertext and Markup language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        
  
        
Overflow-y-scroll
        

            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML is the combination of 
            Hypertext and Markup language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        
  
        
Overflow-y-visible
        

            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML is the combination of 
            Hypertext and Markup language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        
    

  

输出：

参考： https://primer.style/css/utilities/layout#overflow