Desbordamiento de texto CSS: ellipsis, line clamp y corte de palabras
Laboratorio de overflow CSS y truncado de texto
Desbordamiento de texto CSS: ellipsis, line clamp, word break | We.Inc
Redimensiona una caja con una URL larga y una palabra compuesta alemana, y prueba en vivo overflow, text-overflow: ellipsis, line clamp, word-break, overflow-wrap y hyphens, con clases de Tailwind.
El contenido largo se sale de su caja cuando la caja es demasiado pequeña. overflow decide qué pasa con lo que sobra: visible, hidden, clip, scroll o auto. Para una sola línea que termine en puntos suspensivos, combina white-space: nowrap, overflow: hidden y text-overflow: ellipsis. Para varias líneas usa -webkit-line-clamp. Para partir palabras que no se pueden cortar, usa overflow-wrap: anywhere.
La caja necesita su propia barra de desplazamiento
overflow: auto
Arrastra el control de ancho y la caja de ejemplo se encoge alrededor de una dirección web real, la palabra Donaudampfschifffahrtsgesellschaft y una frase normal. Cada opción de overflow, ajuste de línea y recorte es un botón, el resultado es instantáneo y el CSS que necesitarías aparece escrito debajo.
Elige qué texto de ejemplo cargar: una URL, una palabra compuesta larga o un párrafo.
Arrastra el control de ancho hasta que el texto ya no quepa.
Prueba uno a uno los valores de overflow, ellipsis, un line clamp y las opciones de corte de palabras.
Copia el CSS que coincide con el resultado que te guste.
El ellipsis necesita las tres cosas: nowrap, un overflow distinto de visible y un límite de ancho. Si falta cualquiera, no aparecen los puntos.
Dentro de una fila flex, un hijo truncado también necesita min-width: 0, porque por defecto los elementos flex se niegan a encogerse por debajo de su contenido.
Pon el texto completo en un atributo title o muéstralo al recibir el foco, ya que el truncado oculta palabras a quienes no pueden hacer hover.
hyphens: auto solo separa sílabas cuando el elemento o un padre tiene un atributo lang para el que el navegador tiene diccionario.
Preguntas frecuentes
¿Por qué no funciona text-overflow: ellipsis?
Normalmente falta una de sus compañeras. El elemento debe ser de bloque o inline-block con un ancho limitado, tener overflow en hidden o clip y mantener el texto en una línea con white-space: nowrap. En un elemento flex o grid, añade también min-width: 0 para que pueda encogerse.
¿Se puede usar line-clamp sin el prefijo -webkit-?
La forma con prefijo, -webkit-line-clamp junto con display: -webkit-box y -webkit-box-orient: vertical, funciona en todos los navegadores principales actuales y es lo que genera Tailwind. La propiedad line-clamp sin prefijo de CSS Overflow Level 4 todavía se está implantando, así que consulta caniuse antes de depender solo de ella.
¿Qué diferencia hay entre word-break y overflow-wrap?
overflow-wrap solo corta una palabra cuando de otro modo se desbordaría, así que las palabras normales se ajustan con normalidad. word-break: break-all permite al navegador cortar entre dos letras cualesquiera en todas partes, lo que da un texto irregular y difícil de leer. word-break: keep-all es para texto en chino, japonés y coreano cuando no quieres cortes dentro de las palabras.
¿Qué hace overflow: clip que no haga hidden?
Ambos cortan lo que sobra. hidden sigue creando un contenedor de desplazamiento, así que un script puede desplazarlo y afecta a position: sticky dentro de él. clip prohíbe todo desplazamiento y, con overflow-clip-margin, puedes dejar que el contenido sobresalga unos píxeles del borde antes de recortarlo.
¿Cómo trunco texto dentro de una celda de tabla?
Pon table-layout: fixed en la tabla y un ancho en las columnas, y aplica a la celda el trío habitual de nowrap, hidden y ellipsis. Sin el diseño fijo, la columna simplemente crece para que quepa el texto. Otra opción es max-width: 0 con width: 100% en la celda.
Los cinco valores de overflow
visible es el valor por defecto y deja que el contenido se pinte fuera de la caja sin afectar al diseño que la rodea. hidden y clip lo cortan en el borde del padding. scroll siempre muestra barras de desplazamiento, aunque nada se desborde, y auto solo las muestra cuando hacen falta, que casi siempre es la mejor opción.
overflow es la forma abreviada de overflow-x y overflow-y. Poner un eje en visible y el otro en hidden no funciona tal como está escrito: el navegador calcula visible como auto en esa combinación, así que puede aparecer una barra de desplazamiento inesperada. clip es la excepción y sí puede combinarse con visible.
Cortar palabras que no caben
overflow-wrap: break-word corta las palabras largas cuando hace falta, pero no deja que la caja se encoja por debajo de la palabra más larga, así que todavía puede desbordarse dentro de elementos flex y tablas. overflow-wrap: anywhere también reduce ese tamaño mínimo, por eso arregla las URL largas en barras laterales estrechas.
hyphens: auto inserta un guion en un límite de sílaba correcto en los idiomas que admite el navegador, lo que hace mucho más legible el texto alemán y neerlandés justificado o estrecho. Algunas versiones de Safari solo entienden -webkit-hyphens, así que escribe ambos. Usa hyphens: manual y el guion suave ­ cuando quieras elegir tú los puntos de corte.
Truncado y accesibilidad
El texto recortado sigue estando en la página, así que los lectores de pantalla leen todo el contenido, lo cual es bueno. Quienes salen perdiendo son los usuarios videntes de teclado y pantalla táctil, porque no pueden hacer hover para ver un tooltip.
Para nombres de producto o mensajes importantes, ofrece una forma de expandir el texto, como un botón Ver más o un elemento details, en lugar de depender solo de los puntos suspensivos. Reserva los line clamp para vistas previas en las que el texto completo esté a un clic.
Comparativa de valores de overflow
Qué hace cada valor de overflow
Valor
Contenido sobrante
Barras de desplazamiento
¿Contenedor de desplazamiento?
Tailwind
Se pinta fuera de la caja
Nunca
No
Se corta en el borde del padding
Nunca
Sí (desplazable por script)
Se corta
Nunca
No
Se desplaza
Siempre visibles
Sí
Se desplaza
Solo cuando hacen falta
Sí
Ellipsis de una sola línea
La receta de ellipsis en tres líneas
Quita cualquiera de las tres declaraciones y los puntos desaparecen. El atributo title mantiene disponible el texto completo.
Ellipsis dentro de una fila flex
El elemento central recibe min-width: 0 para poder encogerse por debajo del ancho de su texto. Sin eso, la fila se desborda.
Clamp de varias líneas
Limitar la descripción de una tarjeta a tres líneas
El patrón con prefijo de abajo es el que tiene amplio soporte. La declaración line-clamp sin prefijo se añade para los navegadores que ya la admiten.
word-break frente a overflow-wrap frente a hyphens
Cortar palabras largas
Declaración
Dónde corta
Útil para
Tailwind
overflow-wrap: break-word
Dentro de una palabra solo si se desbordaría
Texto normal con alguna palabra larga
overflow-wrap: anywhere
Igual, y permite que la caja se encoja
URL en elementos flex y columnas estrechas
wrap-anywhere (v4.1)
word-break: break-all
Entre cualquier letra, siempre
Código, hashes, IDs
word-break: keep-all
Nunca dentro de palabras CJK
Chino, japonés, coreano
hyphens: auto
En las sílabas, con guion
Texto estrecho o justificado con lang definido
La misma URL con cuatro ajustes de corte
Cada caja mide 160px de ancho. Solo la última se deja desbordar.
Truncar celdas de tabla
Diseño de tabla fijo con celdas con ellipsis
table-layout: fixed hace que los anchos de columna se impongan al contenido, así el ellipsis puede entrar en acción.
URL larga
Compuesto alemán
Párrafo
Los granos de café frescos se tuestan cada martes y se envían esa misma tarde, así que llegan a la mayoría de direcciones en los tres días siguientes al tueste, cuando el sabor está en su mejor momento.
El ellipsis por sí solo necesita white-space: nowrap (o un line clamp).
El ellipsis necesita overflow en hidden o clip.
Un line clamp necesita overflow: hidden para cortar el resto.