Cómo Truncar Texto En CSS Con Elegancia

En el diseño web moderno, la gestión del espacio es clave. En muchas ocasiones, necesitamos truncar texto para evitar que desborde su contenedor. Si quieres hacerlo de manera estilizada y funcional, aquí te muestro una solución sencilla usando CSS que cambiará tu manera de gestionar textos largos.

• ¿Qué es truncar texto?
• Código CSS para truncar texto
• Ejemplo práctico de truncado
• Conclusiones

¿Qué es truncar texto?

Truncar texto significa cortar una cadena de caracteres en un espacio limitado, agregando una elipsis (…) para indicar que hay contenido adicional. Es una técnica muy utilizada en diseño responsive y tarjetas informativas donde el espacio es reducido.

Código CSS para truncar texto

El siguiente código CSS te permite truncar texto fácilmente sin necesidad de JavaScript. Se usa un contenedor con un ancho fijo y las propiedades overflow, white-space y text-overflow.

.truncate {
    border: 2px solid grey;
    border-radius: 10px;
    padding: 10px 20px;
    width: 500px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Explicación del código

A continuación, te explico las propiedades más importantes del código:

1. overflow: hidden; Evita que el texto desborde el contenedor.

2. white-space: nowrap; Asegura que el texto se mantenga en una sola línea.

3. text-overflow: ellipsis; Agrega el efecto de elipsis (…) al final del texto.

Ejemplo práctico de truncado

Imagina un escenario donde necesitas mostrar una sola línea de texto como esta:

Lorem ipsum dolor sit amet consectetur adipiscing elit...

Con el estilo CSS mostrado anteriormente, puedes conseguir este efecto de manera limpia y profesional. Úsalo, por ejemplo, en:

– Tarjetas de productos en eCommerce.

– Resúmenes de artículos en blogs.

– Nombres largos en tablas y listados.

Conclusiones

El truncado de texto con CSS es una técnica simple pero muy efectiva. Evita el uso de JavaScript innecesario y mantén tu página ligera y optimizada. ¡Pruébalo y mejora la experiencia de tus usuarios!