# Overflow (recorte y desplazamiento)
> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.
- Página canónica: https://quicklycss.cl/docs/overflow.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt
Utilidades · Desbordamiento
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.
i
## Overflow necesita un límite
El efecto se vuelve visible cuando el contenedor tiene un ancho o alto menor que su contenido.
Código + resultado
## Compara recorte y desplazamiento
El contenido es deliberadamente mayor que su caja para que cada comportamiento sea visible.
HTML
Resultado aplicado Recorta ambos ejes
Prueba el scroll cuando esté disponible
Elemento 01 Elemento 02 Elemento 03
.overflow-hidden recorta el contenido y no ofrece desplazamiento.
```html
...
```
.overflow-clip recorta en el borde de la caja y no crea un contenedor desplazable.
```html
...
```
.overflow-auto muestra desplazamiento únicamente cuando el contenido supera la caja.
```html
...
```
.overflow-scroll fuerza un área desplazable en ambos ejes.
```html
...
```
La composición habilita desplazamiento horizontal y recorta el eje vertical.
```html
...
```
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-auto` Horizontal
### Desplazamiento lateral
Útil para tablas, galerías y filas que conservan el ancho de sus elementos.
`.overflow-y-auto` Vertical
### Panel con altura limitada
Permite recorrer contenido largo sin ampliar indefinidamente la página.
`.overflow-x-hidden-y-auto` Composició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`
01
02
03
04
Cada tarjeta usa `.snap-start`; el contenedor decide el eje y la intensidad del ajuste.
`.scroll-smooth` Comportamiento 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-contain` Propagación Evita que el gesto continúe en el contenedor padre al alcanzar un extremo.
`.scrollbar-none` Visibilidad Oculta visualmente la barra sin desactivar el desplazamiento.
`.scrollbar-gutter-stable` Estabilidad 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-ellipsis` Recorta y añade puntos suspensivos.
Una línea sin indicador Nombre-de-archivo-muy-largo-que-supera-el-ancho-disponible-documentacion-final.pdf
`.text-clip` Recorta 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-3` La clase base prepara el elemento y `.line-3` define el límite.
Palabra extensa https://ejemplo.test/ruta/identificadorExtremadamenteLargoSinSeparadoresQueNoDebeRomperLaTarjeta
`.break-words` Permite 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
01
### Limita primero la caja
Define una dimensión o restricción real antes de esperar un efecto de overflow.
02
### Prefiere un eje
Activa sólo el eje que realmente necesita desplazamiento para evitar barras inesperadas.
03
### Compón el truncado
Usa `.truncate` junto a `.line-*`; una clase de líneas aislada no prepara el recorte.
04
### No ocultes accesibilidad
Si escondes la barra, conserva navegación por teclado y una señal clara de que existe contenido desplazable.