¿Cómo truncar líneas de texto con CSS?

Tarde o temprano te toca un texto dinámico que viene de una API y necesitas que ocupe siempre la misma cantidad de líneas: ni una más, ni una menos. De lo contrario el layout se rompe, las cards quedan disparejas, y la lista termina viéndose desprolija.

La buena noticia es que se puede resolver con CSS puro, sin JavaScript ni mediciones manuales.

La receta

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* cantidad de líneas a mostrar */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Aplicado a un bloque de texto:

const Excerpt = () => (
  <p className="line-clamp">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
  </p>
);

Resultado: el párrafo se corta a tres líneas y el navegador agrega … automáticamente al final.

Notas sobre soporte

A pesar del prefijo -webkit-, esta combinación funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Puedes verificar la compatibilidad actual en caniuse — line-clamp.

Si usas Tailwind, el plugin oficial @tailwindcss/line-clamp viene incluido por defecto desde Tailwind v3.3, así que basta con class="line-clamp-3" y olvidarte del CSS manual.

Cierre

Es uno de esos casos donde el navegador hace el trabajo difícil por ti. Tres líneas de CSS y un layout que no se rompe sin importar el largo del texto.

¡Gracias por leer!