Diseño
overflow
Utilidades para controlar cómo maneja un elemento el contenido que es demasiado grande para el contenedor.
| Clase | Estilos |
|---|---|
overflow-auto | overflow: auto; |
overflow-hidden | overflow: hidden; |
overflow-clip | overflow: clip; |
overflow-visible | overflow: visible; |
overflow-scroll | overflow: scroll; |
overflow-x-auto | overflow-x: auto; |
overflow-y-auto | overflow-y: auto; |
overflow-x-hidden | overflow-x: hidden; |
overflow-y-hidden | overflow-y: hidden; |
overflow-x-clip | overflow-x: clip; |
overflow-y-clip | overflow-y: clip; |
overflow-x-visible | overflow-x: visible; |
overflow-y-visible | overflow-y: visible; |
overflow-x-scroll | overflow-x: scroll; |
overflow-y-scroll | overflow-y: scroll; |
Ejemplos
Mostrar contenido que se desborda
Utiliza la utilidad overflow-visible para evitar que se recorte el contenido dentro de un elemento:
<div class="overflow-visible ..."> <!-- ... --></div>Ten en cuenta que cualquier contenido que se desborde de los límites del elemento será visible.
Ocultar contenido que se desborda
Utiliza la utilidad overflow-hidden para recortar cualquier contenido dentro de un elemento que se desborde de los límites de ese elemento:
<div class="overflow-hidden ..."> <!-- ... --></div>Desplazarse si es necesario
Utiliza la utilidad overflow-auto para agregar barras de desplazamiento a un elemento en caso de que su contenido se desborde de los límites de ese elemento:
Desplázate verticalmente
<div class="overflow-auto ..."> <!-- ... --></div>A diferencia de overflow-scroll, que siempre muestra barras de desplazamiento, esta utilidad solo las mostrará si el desplazamiento es necesario.
Desplazarse horizontalmente si es necesario
Utiliza la utilidad overflow-x-auto para permitir el desplazamiento horizontal si es necesario:
Desplázate horizontalmente
Andrew
Emily
Whitney
David
Kristin
Sarah<div class="overflow-x-auto ..."> <!-- ... --></div>Desplazarse verticalmente si es necesario
Utiliza la utilidad overflow-y-auto para permitir el desplazamiento vertical si es necesario:
Desplázate verticalmente
<div class="h-32 overflow-y-auto ..."> <!-- ... --></div>Desplazarse siempre horizontalmente
Utiliza la utilidad overflow-x-scroll para permitir el desplazamiento horizontal y mostrar siempre barras de desplazamiento, a menos que el sistema operativo deshabilite las barras de desplazamiento siempre visibles:
Desplázate horizontalmente
AndrewEmilyWhitneyDavidKristinSarah<div class="overflow-x-scroll ..."> <!-- ... --></div>Desplazarse siempre verticalmente
Utiliza la utilidad overflow-y-scroll para permitir el desplazamiento vertical y mostrar siempre barras de desplazamiento, a menos que el sistema operativo deshabilite las barras de desplazamiento siempre visibles:
Desplázate verticalmente
<div class="overflow-y-scroll ..."> <!-- ... --></div>Desplazarse en todas las direcciones
Utiliza la utilidad overflow-scroll para agregar barras de desplazamiento a un elemento:
Desplázate vertical e horizontalmente
<div class="overflow-scroll ..."> <!-- ... --></div>A diferencia de overflow-auto, que solo muestra barras de desplazamiento si son necesarias, esta utilidad siempre las muestra. Ten en cuenta que algunos sistemas operativos (como macOS) ocultan las barras de desplazamiento innecesarias independientemente de esta configuración.
Diseño responsivo
Antepone a la utilidad overflow el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.