Generador de texto truncado en CSS
Genera CSS de truncado con puntos suspensivos en una o varias líneas, con vista previa en vivo
Herramienta que genera el CSS necesario para cortar textos largos con puntos suspensivos (…) de forma limpia. Admite tanto el truncado de una sola línea con text-overflow como el de varias líneas con -webkit-line-clamp. Es ideal para desarrolladores y diseñadores que necesitan mantener una altura uniforme en títulos de tarjetas, listados o textos de previsualización. Todo se procesa dentro del navegador: tu texto no se envía a ningún servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Elige el tipo de truncado (una línea o varias líneas)
- Si eliges varias líneas, fija con el deslizador el número máximo de líneas
- Ajusta el ancho del contenedor y comprueba la vista previa en tiempo real
- Copia el CSS generado con un solo clic en el botón
Preguntas frecuentes
- ¿-webkit-line-clamp funciona en todos los navegadores?
- Lo admiten casi todos los navegadores actuales (Chrome, Edge, Safari, Firefox), pero al tratarse de una propiedad nacida con prefijo de WebKit conviene prever un estilo alternativo si necesitas dar soporte a navegadores antiguos.
- ¿En qué se diferencia el truncado de una línea del de varias?
- El de una línea limita el texto a una sola línea y lo recorta mediante overflow, text-overflow y white-space; el de varias líneas usa -webkit-line-clamp para ocultar con puntos suspensivos todo lo que sobrepase el número de líneas indicado.
- ¿Hay casos en los que el truncado de varias líneas (line-clamp) no se aplica según el contenedor?
- Sí, -webkit-line-clamp solo funciona correctamente junto con display: -webkit-box. Si el elemento padre es un contenedor flex o grid, o si el contenedor no tiene un ancho claramente definido, el criterio de salto de línea puede descontrolarse y el truncado no aplicarse correctamente. Lo más seguro es no modificar por tu cuenta la propiedad display en el código generado.