Utilidades · Desbordamiento

Overflow (recorte y desplazamiento)

Controla contenido desbordado, scroll, overscroll, barras, snap y truncado de texto con utilidades composables.

v2.0

Ambos ejes o uno

Usa .overflow-* globalmente o las familias .overflow-x-* y .overflow-y-*.

Scroll controlado

Combina scrollbars, overscroll y snap para paneles, galerías y navegación interna.

Texto resistente

Recorta una línea, limita párrafos o permite cortar palabras largas sin romper el layout.

Código + resultado

Compara recorte y desplazamiento

El contenido es deliberadamente mayor que su caja para que cada comportamiento sea visible.

Prueba el scroll cuando esté disponible

Elemento 01Elemento 02Elemento 03

Ejes y composición

Controla sólo la dirección necesaria

Las variantes por eje evitan activar scroll o recorte donde no corresponde.

.overflow-x-autoHorizontal

Desplazamiento lateral

Útil para tablas, galerías y filas que conservan el ancho de sus elementos.

.overflow-y-autoVertical

Panel con altura limitada

Permite recorrer contenido largo sin ampliar indefinidamente la página.

.overflow-x-hidden-y-autoComposición

X oculto, Y automático

Patrón frecuente para menús laterales, modales y paneles apilados.

Scroll y snap

Desplazamiento predecible

Combina una caja desplazable con snap en el contenedor y alineación en sus hijos.

Arrastra horizontalmente .overflow-x-auto .snap-x-mandatory .scrollbar-thin

Cada tarjeta usa .snap-start; el contenedor decide el eje y la intensidad del ajuste.

.scroll-smoothComportamiento

Suaviza desplazamientos iniciados por enlaces, scripts o navegación interna.

.scroll-mt-{0|8|16|24|32}Margen del destino

Reserva una separación superior cuando un elemento se convierte en objetivo del scroll.

.scroll-pt-{0|8|16|24|32}Padding del contenedor

Desplaza el punto de llegada dentro del área desplazable.

.overscroll-containPropagación

Evita que el gesto continúe en el contenedor padre al alcanzar un extremo.

.scrollbar-noneVisibilidad

Oculta visualmente la barra sin desactivar el desplazamiento.

.scrollbar-gutter-stableEstabilidad

Reserva espacio para la barra y reduce cambios de ancho en el contenido.

Texto y truncado

Evita que el contenido rompa la caja

El truncado de varias líneas se compone con .truncate y una clase .line-1 a .line-6.

Una línea con indicador

Nombre-de-archivo-muy-largo-que-supera-el-ancho-disponible-documentacion-final.pdf

.text-ellipsisRecorta y añade puntos suspensivos.

Una línea sin indicador

Nombre-de-archivo-muy-largo-que-supera-el-ancho-disponible-documentacion-final.pdf

.text-clipRecorta sin añadir puntos suspensivos.

Tres líneas

Este párrafo contiene suficiente texto para ocupar varias líneas. La combinación conserva solamente tres líneas visibles y oculta el contenido restante sin depender de una altura fija.

.truncate .line-3La clase base prepara el elemento y `.line-3` define el límite.

Palabra extensa

https://ejemplo.test/ruta/identificadorExtremadamenteLargoSinSeparadoresQueNoDebeRomperLaTarjeta

.break-wordsPermite cortar cadenas largas cuando no existe un punto natural.

Referencia

Clases disponibles

La tabla resume únicamente las familias presentes en el módulo actual.

Clases	Valores	Función	Ejemplo
`.overflow-{valor}`	visible, hidden, clip, auto, scroll	Controla ambos ejes.	`.overflow-auto`
`.overflow-x-{valor}` / `.overflow-y-{valor}`	visible, hidden, clip, auto, scroll	Controla un eje.	`.overflow-x-auto`
`.overflow-x-hidden-y-auto` / `.overflow-x-auto-y-hidden`	Composición directa	Combina ambos ejes.	`.overflow-x-hidden-y-auto`
`.scroll-{auto\|smooth}`	auto, smooth	Define el comportamiento de scroll.	`.scroll-smooth`
`.scroll-mt-{valor}` / `.scroll-pt-{valor}`	0, 8, 16, 24, 32	Offset superior de destino o contenedor.	`.scroll-mt-16`
`.overscroll[-x\|-y]-{valor}`	auto, contain, none	Controla la propagación del gesto.	`.overscroll-y-contain`
`.text-{clip\|ellipsis}`	Una línea	Recorta texto horizontal.	`.text-ellipsis`
`.truncate .line-{1…6}`	1 a 6 líneas	Limita texto multilínea.	`.truncate .line-3`
`.wrap-` / `.break-` / `.hyphens-*`	Familias tipográficas	Controla espacios, cortes y guionado.	`.break-words`
`.scrollbar-*`	auto, thin, none, color, gutter	Controla presencia y estabilidad de la barra.	`.scrollbar-thin`
`.snap-*`	tipo, eje, alineación y parada	Configura puntos de ajuste.	`.snap-x-mandatory`
`.overflow-break-avoid`	`break-inside: avoid`	Evita partir una caja entre columnas o páginas.	`.overflow-break-avoid`

Recomendaciones

Buenas prácticas de overflow

Limita primero la caja

Define una dimensión o restricción real antes de esperar un efecto de overflow.

Prefiere un eje

Activa sólo el eje que realmente necesita desplazamiento para evitar barras inesperadas.

Compón el truncado

Usa `.truncate` junto a `.line-*`; una clase de líneas aislada no prepara el recorte.

No ocultes accesibilidad

Si escondes la barra, conserva navegación por teclado y una señal clara de que existe contenido desplazable.