Cómo truncar texto en CSS

Para truncar texto en CSS, usa text-overflow: ellipsis para recortar una sola línea y line-clamp para recortar a un número fijo de líneas — esa distinción lo determina todo lo demás.

Si alguna vez has visto cómo el título de una tarjeta se desbordaba completamente de su contenedor mientras text-overflow: ellipsis no hacía absolutamente nada, ya conoces esa frustración. El fallo casi siempre se debe a una de dos cosas: la técnica incorrecta para el número de líneas que deseas, o un contenedor flex que silenciosamente se niega a reducirse. El truncado de una sola línea necesita tres declaraciones trabajando en conjunto; el truncado multilínea necesita el trío de -webkit-box. Los problemas que realmente aparecen en producción son más concretos: ellipsis falla silenciosamente dentro de flexbox, el recorte multilínea falla si el texto no puede ajustarse, y el truncado basado en JavaScript destruye silenciosamente el contenido que los lectores de pantalla necesitan. Este artículo recorre cada patrón funcional y el problema asociado a él.

A continuación, la regla de decisión en formato de tabla:

¿Cómo se trunca una sola línea de texto?

Para truncar una sola línea de texto, tres declaraciones deben funcionar en conjunto: white-space: nowrap detiene el ajuste del texto, overflow: hidden recorta lo que se desborda, y text-overflow: ellipsis añade el …. Si se omite cualquiera de las tres, el efecto se rompe: text-overflow por sí solo no hace nada con el texto ajustado, y sin overflow: hidden no existe un cuadro de recorte contra el que pueda posicionarse la elipsis.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

El elemento también necesita un ancho restrictivo. Si el contenedor es lo suficientemente ancho como para mostrar toda la cadena en una sola línea, nada se desborda y no aparece ninguna elipsis: es el ancho del contenedor padre lo que fuerza el truncado. Aplica esto a tarjetas, celdas de tabla, elementos de navegación o encabezados que deben permanecer en una sola fila.

La propiedad text-overflow acepta clip (el corte duro predeterminado), ellipsis y un <string> personalizado. También existe la palabra clave fade y la función fade(), añadidas al estándar en CSS Overflow Level 4 y listadas actualmente en la sintaxis formal de MDN, pero en la práctica ningún navegador las implementa, así que no dependas de ninguna de las dos en producción.

¿Cómo se trunca texto a múltiples líneas?

Para el truncado multilínea, establece display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N y overflow: hidden. A pesar de los prefijos de proveedor, esta combinación está soportada en todos los navegadores principales y es el enfoque seguro para producción hoy en día.

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Mantén el overflow: hidden. Como señala MDN, sin él el texto no se recorta realmente, aunque la elipsis sigue apareciendo después del número de líneas indicado, por lo que terminas viendo tanto la elipsis como el texto desbordado debajo de ella. Estas propiedades con prefijo también son codependientes: -webkit-line-clamp solo funciona cuando display es -webkit-box (o -webkit-inline-box) y -webkit-box-orient es vertical. Las propiedades con prefijo están formalmente obsoletas, pero esa dependencia entre las tres es en sí misma un comportamiento especificado que los navegadores seguirán soportando, por lo que utilizarlas no conlleva ningún riesgo real.

Un caso de fallo a tener en cuenta: el recorte multilínea solo funciona si se permite que el texto se ajuste. Un white-space: nowrap heredado lo romperá silenciosamente, colapsando todo en una sola línea. Mantén white-space en normal o pre-wrap.

También existe una propiedad estándar sin prefijo line-clamp definida en CSS Overflow Module Level 4, que limita el contenido de un bloque a un número determinado de líneas. Sin embargo, a partir de 2026, aún está marcada como no Baseline, ya que algunos navegadores ampliamente utilizados aún no la soportan. Trátala como mejora progresiva. Añádela junto a las declaraciones con prefijo, no como reemplazo:

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* estandarizada, añadir junto a las anteriores — aún no es un reemplazo */
  overflow: hidden;
}

Por qué ellipsis falla dentro de flexbox (y grid)

Ellipsis falla silenciosamente en un hijo flex porque el min-width: auto predeterminado de un elemento flex se niega a reducirse por debajo del ancho de su contenido, por lo que el elemento nunca se vuelve lo suficientemente estrecho como para desbordarse, y text-overflow no tiene nada que recortar. El hijo se desborda del contenedor en lugar de truncarse. La solución es una sola declaración en el hijo:

.card { display: flex; }

.card__label {
  min-width: 0; /* anula el mínimo automático para que el elemento pueda reducirse */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

El dimensionado mínimo automático de min-width: auto también se aplica a los elementos de grid, por lo que el truncado dentro de una pista de CSS Grid falla por la misma razón. La solución es idéntica: establece min-width: 0 en el hijo (o overflow: hidden, que también elimina el mínimo automático). Este es el bug de truncado más común en el mundo real: el CSS parece correcto de forma aislada y solo falla una vez que el elemento es un hijo de flex o grid.

Equivalentes en Tailwind

Tailwind incluye ambos patrones como utilidades, sin necesidad de ningún plugin. La utilidad truncate es una composición que establece overflow: hidden, text-overflow: ellipsis y white-space: nowrap: la receta completa de una sola línea en una única clase. Para múltiples líneas, line-clamp-<n> (por ejemplo line-clamp-3, o line-clamp-none para desactivarlo) emite el trío -webkit-box. Las utilidades de line-clamp forman parte del núcleo de Tailwind desde la v3.3; la versión estable actual es la v4.3.3 (julio de 2026), por lo que no hay nada adicional que instalar.

<p class="truncate">Una sola línea, recortada con elipsis…</p>
<p class="line-clamp-3">Múltiples líneas, recortadas a tres…</p>

Dentro de un hijo flex o grid, añade min-w-0: el equivalente en utilidad de la corrección min-width: 0.

Accesibilidad: truncado con CSS vs. truncado con JS

Dado que el truncado con CSS es puramente presentacional, la cadena completa permanece en el DOM y los lectores de pantalla la leen íntegramente, sin necesidad de ningún aria-label. Esta es la diferencia decisiva respecto al truncado con JavaScript: un enfoque basado en text.substring(0, 50) reescribe el nodo del DOM, por lo que el texto recortado desaparece para todos, incluidas las tecnologías de asistencia, a menos que lo preserves por separado con un atributo title o aria-label.

Incluso con CSS, el truncado sigue ocultando información visualmente. Las repeticiones de sesión en interfaces de producción revelan con frecuencia este tipo de problema: un usuario pasando el cursor o esforzándose por leer una celda de tabla o un elemento de navegación recortado que oculta justo el detalle que necesitaba. Combina el truncado en contenido informativo con un atributo title o una opción para expandir el texto:

<span class="truncate" title="Informe de ingresos trimestrales — región EMEA, T3 2026">
  Informe de ingresos trimestrales — región EMEA, T3 2026
</span>

Una limitación importante: la elipsis de -webkit-line-clamp no se puede personalizar y text-overflow no se aplica a ella, ya que text-overflow solo afecta al desbordamiento en línea. Si necesitas un indicador de truncado personalizado en texto multilínea, esa es la señal para optar por un patrón diferente en lugar de forzar el recorte.

Usa text-overflow: ellipsis cuando necesites una línea y el trío line-clamp cuando necesites varias, recuerda min-width: 0 en el momento en que el elemento esté dentro de flex o grid, y añade un title siempre que el texto oculto tenga relevancia informativa. Con eso quedan cubiertos los patrones que funcionan correctamente en producción y los tres que silenciosamente no lo hacen.

Preguntas frecuentes

¿Cuál es la diferencia entre text-overflow: ellipsis y line-clamp?

Usa text-overflow: ellipsis para recortar una sola línea y line-clamp para recortar a un número fijo de líneas. El truncado de una sola línea necesita tres declaraciones trabajando en conjunto: white-space: nowrap, overflow: hidden y text-overflow: ellipsis. El recorte multilínea necesita el trío -webkit-box junto con overflow: hidden, y no responde a text-overflow en absoluto, ya que esa propiedad solo afecta al desbordamiento en línea.

¿Por qué mi truncado con ellipsis no funciona dentro de flexbox o grid?

El min-width: auto predeterminado de un elemento flex o grid se niega a reducirse por debajo del ancho de su contenido, por lo que el elemento nunca se vuelve lo suficientemente estrecho como para desbordarse y text-overflow no tiene nada que recortar. Establecer min-width: 0 en ese hijo anula el mínimo automático y restaura el truncado. Aplicar overflow: hidden al hijo también elimina el mínimo automático. Este es el bug de truncado más común en el mundo real, porque el CSS parece correcto de forma aislada.

¿Es seguro usar la propiedad line-clamp sin prefijo en 2026?

No. La propiedad line-clamp estandarizada y sin prefijo está definida en CSS Overflow Module Level 4, pero a partir de 2026 MDN la marca como no Baseline porque no funciona en algunos de los navegadores más utilizados. Añádela junto a las declaraciones -webkit-box, -webkit-box-orient y -webkit-line-clamp como mejora progresiva, en lugar de reemplazarlas. El trío con prefijo sigue siendo el enfoque seguro para producción hoy en día.

¿El truncado con CSS afecta la accesibilidad para los lectores de pantalla?

No. El truncado con CSS es puramente presentacional, por lo que la cadena completa permanece en el DOM y los lectores de pantalla la leen íntegramente sin necesidad de ningún aria-label. El problema surge con el truncado en JavaScript: un enfoque basado en substring reescribe el nodo del DOM, eliminando el texto recortado para todos, incluidas las tecnologías de asistencia, a menos que lo preserves con un atributo title o aria-label. Para contenido informativo, combina el truncado con CSS con un atributo title o una opción para expandir el texto, independientemente.