Esta clase acepta más de un valor en Tailwind CSS. Es la alternativa a la propiedad CSS Overflow . Este desbordamiento es para controlar cómo se maneja el contenido de un elemento que es demasiado grande para el contenedor. Indica si recortar contenido o agregar barras de desplazamiento
Hay una propiedad separada en CSS para CSS Overflow-x y CSS Overflow-y ,
Clases de desbordamiento:
- desbordamiento automático
- desbordamiento-oculto
- desbordamiento-visible
- desplazamiento de desbordamiento
- desbordamiento-x-auto
- desbordamiento-y-auto
- desbordamiento-x-oculto
- desbordamiento-y-oculto
- desbordamiento-x-visible
- desbordamiento-y-visible
- desbordamiento-x-desplazamiento
- desbordamiento-y-desplazamiento
overflow-auto: Agrega automáticamente una barra de desplazamiento cada vez que se requiere. Esta clase agrega barras de desplazamiento a un elemento en caso de que su contenido sobrepase el límite de ese elemento.
Sintaxis:
<element class="overflow-auto">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow Class</b> <div class="overflow-auto bg-green-200 p-4 mx-16 h-24 text-justify"> 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 </div> </center> </body> </html>
Producción:
overflow-hidden: el desbordamiento se recorta y el resto del contenido es invisible. Esta clase se usa para recortar cualquier contenido dentro de un elemento que desborde los límites de ese elemento.
Sintaxis:
<element class="overflow-hidden">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow Class</b> <div class="overflow-hidden bg-green-200 p-4 mx-16 h-24 text-justify"> 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 </div> </center> </body> </html>
Producción:
overflow-visible: el contenido no se recorta y es visible fuera del cuadro del elemento. Esta clase solía evitar que se recortara el contenido dentro de un elemento.
Sintaxis:
<element class="overflow-visible">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow Class</b> <div class="overflow-visible bg-green-200 p-4 mx-16 h-24 text-justify"> 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 </div> </center> </body> </html>
Producción:
overflow-scroll: el desbordamiento se recorta pero se agrega una barra de desplazamiento para ver el resto del contenido. La barra de desplazamiento puede ser horizontal o vertical. Esta clase se usa cuando necesita mostrar barras de desplazamiento, esta utilidad solo se mostrará si es necesario desplazarse.
Sintaxis:
<element class="overflow-scroll">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow Class</b> <div class="overflow-scroll bg-green-200 p-4 mx-16 h-24 text-justify"> 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? </div> </center> </body> </html>
Producción:
Overflow-x: esta clase especifica si agregar una barra de desplazamiento, recortar el contenido o mostrar el contenido de desbordamiento de un elemento de nivel de bloque cuando se desborda en los bordes izquierdo y derecho.
overflow-x-auto: proporciona un mecanismo de desplazamiento para cuadros desbordados.
Sintaxis:
<element class="overflow-x-auto">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow-x Class</b> <div class="overflow-x-auto bg-green-200 p-4 mx-16 h-24 text-justify"> 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? </div> </center> </body> </html>
Producción:
overflow-x-hidden: se utiliza para recortar el contenido y no se proporciona ningún mecanismo de desplazamiento en el eje x.
Sintaxis:
<element class="overflow-x-hidden">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow-x Class</b> <div class="overflow-x-hidden bg-green-200 p-4 mx-16 h-12 text-justify"> 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? </div> </center> </body> </html>
Producción:
overflow-x-visible: esta clase no recorta el contenido. El contenido puede mostrarse fuera de los bordes izquierdo y derecho.
Sintaxis:
<element class="overflow-x-visible">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow-x Class</b> <div class="overflow-x-visible bg-green-200 p-4 mx-16 h-24 text-justify"> 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? </div> </center> </body> </html>
Producción:
overflow-x-scroll: se utiliza para recortar el contenido y proporcionar un mecanismo de desplazamiento.
Sintaxis:
<element class="overflow-x-scroll">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow-x Class</b> <div class="overflow-x-scroll bg-green-200 p-4 mx-16 h-24 text-justify"> 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? </div> </center> </body> </html>
Producción:
Overflow-y: esta clase especifica si agregar una barra de desplazamiento, recortar el contenido o mostrar el contenido de desbordamiento de un elemento de nivel de bloque cuando se desborda en los bordes superior e inferior.
overflow-y-auto: proporciona un mecanismo de desplazamiento para cuadros desbordados.
Sintaxis:
<element class="overflow-y-auto">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow-y Class</b> <div class="overflow-y-auto bg-green-200 p-4 mx-16 h-24 text-justify"> 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? </div> </center> </body> </html>
Producción:
overflow-y-hidden: se utiliza para recortar el contenido y no se proporciona ningún mecanismo de desplazamiento en el eje y.
Sintaxis:
<element class="overflow-y-hidden">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow-y Class</b> <div class="overflow-y-hidden bg-green-200 p-4 mx-16 h-24 text-justify"> 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? </div> </center> </body> </html>
Producción:
overflow-y-visible: esta clase no recorta el contenido. El contenido puede mostrarse fuera de los bordes izquierdo y derecho.
Sintaxis:
<element class="overflow-y-visible">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow-y Class</b> <div class="overflow-y-visible bg-green-200 p-4 mx-16 h-24 text-justify"> 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? </div> </center> </body> </html>
Producción:
overflow-y-scroll: se utiliza para recortar el contenido y también proporciona un mecanismo de desplazamiento.
Sintaxis:
<element class="overflow-y-scroll">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Overflow-y Class</b> <div class="overflow-y-scroll bg-green-200 p-4 mx-16 h-24 text-justify"> 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? </div> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA