Primer desbordamiento de diseño CSS

Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible.

El diseño se utiliza para mostrar el contenido con un estilo particular. Por ejemplo, podemos cambiar el diseño del documento usando visualización, flotación, alineación y otras utilidades.

Primer CSS Overflow Layout se utiliza para establecer el desbordamiento de visibilidad del contenido. El desbordamiento se puede configurar en los ejes x e y de forma independiente. 

Clases usadas:

  • .overflow-x-auto: se utiliza para configurar la barra de desplazamiento en el eje x si es necesario.
  • .overflow-x-hidden: se utiliza para ocultar el contenido de desbordamiento en el eje x.
  • .overflow-x-scroll: se utiliza para crear una barra de desplazamiento en el eje x.
  • .overflow-x-visible: se usa para mostrar todo el contenido de desbordamiento fuera del cuadro en el eje x.
  • .overflow-y-auto:  se utiliza para configurar la barra de desplazamiento en el eje y si es necesario.
  • .overflow-y-hidden: se usa para ocultar el contenido de desbordamiento en el eje y.
  • .overflow-y-scroll: se utiliza para crear una barra de desplazamiento en el eje y.
  • .overflow-y-visible: se usa para mostrar todo el contenido de desbordamiento fuera del cuadro en el eje y.

Sintaxis:

<div class="overflow-*"> Content... </div>

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Layout Overflow</title>
  
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet" />
  
    <style>
        .GFG {
            width: 300px;
            text-align: justify;
            border: 1px solid black;
        }
        .text-center {
            padding-bottom: 500px;
        }
    </style>
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>
  
        <h3>Primer CSS Layout Overflow</h3>
  
        <h4>Overflow-x-auto</h4>
        <div class="GFG d-inline-block 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.
        </div>
  
        <h4>Overflow-x-hidden</h4>
        <div class="GFG d-inline-block 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.
        </div>
  
        <h4>Overflow-x-scroll</h4>
        <div class="GFG d-inline-block 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.
        </div>
  
        <h4>Overflow-x-visible</h4>
        <div class="GFG d-inline-block 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.
        </div>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Layout Overflow</title>
  
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet" />
  
    <style>
        .GFG {
            width: 300px;
            height: 200px;
            text-align: justify;
            border: 1px solid black;
        }
        .text-center {
            padding-bottom: 500px;
        }
    </style>
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>
  
        <h3>Primer CSS Layout Overflow</h3>
  
        <h4>Overflow-y-auto</h4>
        <div class="GFG d-inline-block 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.
        </div>
  
        <h4>Overflow-y-hidden</h4>
        <div class="GFG d-inline-block 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.
        </div>
  
        <h4>Overflow-y-scroll</h4>
        <div class="GFG d-inline-block 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.
        </div>
  
        <h4>Overflow-y-visible</h4>
        <div class="GFG d-inline-block 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.
        </div>
    </div>
</body>
  
</html>

Producción:

 

Referencia: https://primer.style/css/utilities/layout#overflow

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *