Generador de truncado de texto CSS
Genera CSS para truncar texto en una o varias líneas con vista previa
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta genera código CSS listo para usar que trunca textos largos con puntos suspensivos (…), ya sea en una sola línea con text-overflow o en varias líneas con -webkit-line-clamp. Es útil para desarrolladores y diseñadores que necesitan mantener títulos de tarjetas, listas o fragmentos de vista previa con una altura fija. Todo se procesa en el navegador, sin enviar ningún texto a un servidor.
Cómo usar
- Elige el modo de truncamiento: una línea o varias líneas
- En modo multilínea, ajusta el número máximo de líneas con el deslizador
- Ajusta el ancho del contenedor y revisa la vista previa en vivo
- Copia el CSS generado con un clic
Preguntas frecuentes
- ¿-webkit-line-clamp funciona en todos los navegadores?
- Es compatible con todos los navegadores modernos (Chrome, Edge, Safari, Firefox), aunque nació como propiedad con prefijo WebKit, así que conviene prever un respaldo para navegadores muy antiguos.
- ¿Cuál es la diferencia entre truncado de una línea y de varias?
- El truncado de una línea usa overflow, text-overflow y white-space para cortar el texto en una sola línea, mientras que el multilínea usa -webkit-line-clamp para limitar el texto a un número fijo de líneas antes de añadir los puntos suspensivos.