Truncar texto con puntos suspensivos en CSS

¿Cómo podemos utilizar esta herramienta para que textos largos no alteren el diseño de una página? La respuesta radica en entender cómo aplicar correctamente las propiedades de CSS que se encargan de truncar texto, mejorando no solo la apariencia, sino también la experiencia del usuario.

Cuando creamos un sitio web, es fácil caer en el error de incluir textos sin considerar su longitud y cómo se verán en diferentes dispositivos. Un sitio responsivo debería adecuarse a todas las pantallas, y eso incluye el manejo adecuado de texto. Usar puntos suspensivos para indicar que hay más texto puede marcar la diferencia. Aquí exploraremos las diversas propiedades de CSS que ayudan a implementar esta técnica, y lo mejor es que no es tan complicado como parece.

El uso de CSS para truncar texto no solo mejora la estética, sino que también optimiza la usabilidad del sitio web. Con el crecimiento de dispositivos móviles, esta técnica se ha vuelto más relevante que nunca.

Puntos suspensivos en CSS

Los puntos suspensivos en CSS son una forma visual de indicar que hay más contenido no visible. Se utilizan principalmente para mejorar la presentación del texto que no cabe en el espacio designado. Por ejemplo, en listas de productos o descripciones breves, este método ayuda a que la información sea más manejable.

Importancia del truncado de texto

• Mejor experiencia de usuario. Los puntos suspensivos permiten que el usuario sepa que hay más contenido disponible, lo que puede generar curiosidad e interés.
• Mejor uso del espacio. Especialmente en diseños responsivos, esta técnica evita que los elementos de la página se desborden y garantiza que el diseño se mantenga ordenado.

Cómo usar CSS para truncar texto

Para implementar esta técnica, se utilizan varias propiedades CSS que funcionan en conjunto. A continuación, se mencionan las más relevantes:

1. white-space: Controla cómo el espacio en blanco es manejado en un elemento.
2. overflow: Determina cómo manejar el contenido que excede el tamaño de su contenedor.
3. text-overflow: Se utiliza para especificar cómo se debe mostrar el contenido recortado.

Sintaxis básica

Copiar.elemento {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Con estas propiedades, cualquier texto que sobrepase su contenedor se mostrará con puntos suspensivos.

Ejemplo práctico de cortar texto con CSS

Veamos un ejemplo concreto para entender mejor cómo implementar esto en nuestro diseño. Supongamos que tenemos un contenedor para un título de un producto que es demasiado largo.

Copiar<div class="producto">
    <h1 class="titulo">Título del producto que es demasiado largo para caber</h1>
</div>

CSS para nuestro ejemplo

Copiar.producto {
    width: 200px; /* ancho del contenedor */
    border: 1px solid #ccc;
}

.titulo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* ocupa todo el espacio del contenedor */
}

Con esto, el título del producto se truncará con puntos suspensivos si es demasiado largo.

Mejores prácticas para utilizar puntos suspensivos

• No abusar del truncado: Aunque es útil, un texto truncado no debe ser la norma. Debe haber balance.
• Asegurar la legibilidad: Asegúrate de que el texto que se cortará sea comprensible.
• Considerar el contexto: Algunos textos pueden necesitar más contexto. Ajusta en consecuencia.

Compatibilidad del truncado de texto en navegadores

No todos los navegadores interpretan CSS de la misma manera. Es vital comprobar la compatibilidad:

Errores comunes al cortar texto con CSS

• No establecer un ancho: Sin un ancho definido al elemento contenedor, text-overflow no funcionará.
• Usar elementos que no soportan text-overflow: Algunos elementos de bloque no funcionan correctamente con esta propiedad.

Recursos adicionales para mejorar el uso de CSS

• MDN Web Docs: Un recurso excelente para consultar detalles sobre CSS.
• CSS Tricks: Contiene ejemplos prácticos y técnicas avanzadas para usar CSS en truncados.

Técnicas avanzadas para texto truncado en CSS

¿Quieres truncar más de una línea de texto? Puedes usar combinaciones de CSS moderno, como -webkit-line-clamp.

Copiar.multiline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2; /* número de líneas visibles */
}

Beneficios de truncar texto en diseño web

• Aprovechamiento del espacio. Se puede incluir más contenido sin que parezca desordenado.
• Consistencia en el diseño. Se mantiene un estilo uniforme sin desbordes.

Respuestas a preguntas frecuentes

¿Qué navegadores soportan puntos suspensivos en CSS?

La mayoría de los navegadores modernos soportan estas propiedades correctamente. Sin embargo, siempre es bueno realizar pruebas en los navegadores más utilizados por tu audiencia.

¿Es posible truncar texto en varias líneas?

Sí, utilizando técnicas avanzadas como -webkit-line-clamp, puedes cortar texto en varias líneas y mostrar puntos suspensivos al final.

¿Cómo afecta el truncado al SEO?

El truncado en sí no afecta el SEO, pero sí puede mejorar la experiencia del usuario, lo cual es un aspecto importante en el posicionamiento.