Hace unas semanas lanzamos @tailwindcss/line-clamp, un plugin oficial de Tailwind CSS para truncar texto a un número específico de líneas.
Imagina que estás implementando un hermoso diseño que tú o alguien de tu equipo elaboró cuidadosamente en Figma. Has clavado todos los diferentes layouts en cada breakpoint, perfeccionado el espacio en blanco y la tipografía, y la fotografía que estás usando realmente está dando vida al diseño.
Se ve totalmente increíble — hasta que lo conectas a tu contenido de producción real y te das cuenta de que tu hermosa cuadrícula de tarjetas de blog se deshace porque, por supuesto, los extractos de artículos reales no tienen mágicamente exactamente tres líneas de largo, y ahora cada tarjeta tiene una altura diferente.
¿Te suena familiar? Si es así, el plugin line-clamp está aquí para salvarte el pellejo.
Primero, instala el plugin y agrégalo a tu archivo tailwind.config.js:
npm install @tailwindcss/line-clampmodule.exports = { // ... plugins: [ // ... require("@tailwindcss/line-clamp"), ],};Luego, todo lo que necesitas hacer es agregar una utilidad line-clamp-{n} a cualquier bloque de texto para truncar automáticamente a n líneas con puntos suspensivos al final:
<p class="line-clamp-3"> Aquí tienes un bloque de texto de una publicación de blog que no tiene convenientemente tres líneas de largo como diseñaste originalmente. Probablemente tenga como 6 líneas en móvil o incluso en escritorio dependiendo de cómo tengas las cosas dispuestas. Verdaderamente un gran dolor de cabeza, y no el tipo de cosa con la que esperabas perder tu tiempo tratando de lidiar a las 4:45 pm de un viernes, ¿verdad? Tienes boletos para SmackDown y escuchaste que habrá una lucha no televisada con ese tipo local de dos pueblos más allá con el que tu primo fue a la preparatoria antes de que comience el show, y te lo vas a perder si no llegas temprano.</p>Para más detalles, checa la documentación en el repositorio de GitHub.