Generador de CSS line-clamp
Genera una regla CSS que trunca el texto después de un número definido de líneas, con puntos suspensivos o desvanecimiento.
Generador de CSS line-clamp
Los títulos de tarjetas, las descripciones de productos y las vistas previas de comentarios todos necesitan el mismo truco eventualmente: mostrar algunas líneas de texto y cortar el resto de forma limpia en lugar de permitir que un párrafo largo desajuste el diseño. Este generador escribe esa regla CSS para ti, lista para pegar en una hoja de estilos como una clase ".line-clamp".
Elige modo de una línea para un truncado de una línea — la combinación clásica "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" utilizada para títulos y celdas de tabla — o modo multi-línea, que utiliza "-webkit-line-clamp" para cortar después de las líneas que establezca, respetando el alto de línea que elijas. Activa la opción de desvanecimiento para suavizar la última línea al fondo con un degradado en lugar de puntos suspensivos fijos, lo que se ve mejor sobre una imagen o tarjeta coloreada. La opción de compatibilidad añade un bloque "@supports" para que los navegadores sin soporte de line-clamp obtengan un corte máximo razonable en lugar de una pared de texto sin recortar, y la opción de Tailwind añade la clase de utilidad correspondiente ("truncate" o "line-clamp-N") como comentario para que no tengas que buscarla.
Escribe o pega una frase en el campo de vista previa y la herramienta estima cómo se dividiría tu texto en las líneas elegidas, para que puedas verificar el número de líneas antes de comprometerte con un diseño. La estimación se basa en una longitud de línea promedio de lectura en lugar de medir fuentes y contenedores reales — es una guía para elegir un número de líneas razonable, no una representación exacta en píxeles.
Todo se ejecuta localmente en tu navegador: el CSS se genera mientras escribes, nada se carga en ningún lugar, y puedes copiar el resultado, descargarlo como archivo .txt, o enviarlo directamente a la entrada de otra herramienta para continuar trabajando en él.