Cómo evitar que el texto de una web se desborde

Cuando se trabaja con textos durante el proceso de maquetación de una página web, hay que tener en cuenta cómo se comportará este. A diferencia del diseño gráfico tradicional en el que los elementos que se introducen inicialmente quedan fijos, en web se debe preveer los cambios de longitud y tamaño, definiendo cómo afectarán al espacio en el que se encuentran así como a los elementos adyacentes. Hay que tener en cuenta que, sobre todo en webs dinámicas, los textos que se añadan escaparán a nuestro control y será el cliente el que los introduzca.

El problema que nos encontramos cuando no hemos sido previsores es que un texto puede desbordarse de su contenedor rompiendo el diseño, principalmente porque el tamaño del texto es demasiado grande cuando el espacio se reduce o porque el número de caracteres es superior al espacio reservado, algo bastante habitual cuando el texto contiene una URL.

Por suerte CSS nos permite solucionar estos problemas a través de diferentes tipos de técnicas, de modo que vamos a ver algunas de ellas para que puedas aplicarlas según el caso. A decir verdad, lo más probable es que quieras combinar varias medidas, pero eso ya quedará a tu criterio profesional

Romper palabras

Para evitarlo, podemos usar la clase overflow-wrap, la cual le indica al navegador que permita romper palabras largas cuando sea necesario haciendo que pasen a una segunda línea.

.text-content {
    overflow-wrap: break-word;
    word-wrap: break-word; /* para compatibilidad */
}

Verás que he añadido dos propiedades y eso es porque la propiedad moderna es overflow-wrap, pero word-wrap sigue siendo útil para compatibilidad.

Cortar usando puntos suspensivos

A veces no quieres que el texto se parta, sino que se corte visualmente con puntos suspensivos. Esto es muy útil para cuando el área del texto es limitada y no podemos cambiarla, de este modo impedimos que se produzcan saltos de línea adicionales.

.text-ellipsis {
    white-space: nowrap; /* el texto permanecerá en una línea */
    overflow: hidden; /* oculta el desbordamiento */
    text-overflow: ellipsis; /* mostramos ... */
}

Si quieres limitarlo a varias líneas (por ejemplo, 2 o 3), puedes hacerlo con una técnica moderna basada en -webkit-line-clamp:

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

Soporte: ampliamente funcional en navegadores modernos, aunque aún usa el prefijo -webkit-.

Diseño ajustable

Otra medida que podemos tomar es definir límites máximos en el tamaño de los textos, tanto por arriba como por abajo. Si usamos clamp() como parámetro en el font-size, agregamos un rango con el que escalamos las dimensiones del texto en función de la resolución pero poniendo un tope.

.card-title {
    font-size: clamp(1rem, 2vw + 0.5rem, 1.75rem);
    overflow-wrap: anywhere; /* permite romper en cualquier punto */
}

Con overflow-wrap: anywhere podemos romper palabras incluso sin espacios ni guiones, pero sin afectar al espaciado normal del texto.

En resumen

Los contenidos de una web normalmente están vivos, crecerán, saltarán de líneas y contendrán palabras muy largas. Tener en cuenta esto en la fase de diseño es importante porque evita problemas futuros y transmite profesionalidad al visitante.

Como maquetador web freelance, anticiparse a lo que sucederá cuando se introduzcan diferentes tipos de textos y hacer pruebas a diferentes resoluciones, forma parte de mi trabajo habitual. Pero tan importante es ser previsor como saber solucionar el problema cuando se presenta. Espero que te sea de utilidad estas pequeñas soluciones para tus proyectos.