() translation by (you can also view the original English article)
Cuando una cadena de texto desborda los límites de un contenedor, puede causar un desorden en todo tu diseño. Aquí hay un buen truco para controlar el desbordamiento de texto, truncando las cadenas largas con una elipsis de CSS
Text overflow (con ellipsis de CSS)
Nuestra demostración de texto desbordado
Durante este consejo breve, usaremos la siguiente demostración para mostrar cómo funciona la propiedad text overflow:
Cuando el texto es demasiado largo
Las cadenas de texto largas, que no tengan espacios y que estén contenidas dentro de algo que no sea tan ancho, se desbordarán naturalmente más allá de los límites del contenedor (como esta dirección de correo electrónico en la siguiente captura de pantalla):
Como puedes ver, causa un verdadero desorden.
Añade la propiedad de overflow de CSS
Con una simple propiedad podemos mejorar esto. Añadiendo overflow: hidden; al párrafo que contiene la dirección de correo electrónico, ocultaremos todo lo que no se ajuste al contenedor:
¡Resuelto! Hemos truncado exitosamente el texto largo.
Mejor truncamiento con ellipsis de CSS
Nuestro diseño se ve mejor, pero no es tan práctico. De hecho, hemos hecho que los correos electrónicos se muestren de forma inexacta, ofreciendo información errónea al usuario. No obstante, añadiendo la regla text-overflow: ellipsis; a nuestra cadena de correo electrónico, obtendremos lo siguiente:
La elipsis son los 3 puntos suspensivos (...). Ahora el usuario puede ver el diseño correctamente y gracias a ellipsis de CSS se le informa de que hay más información sobre la dirección de correo electrónico de la que se muestra.
Nota: Esto únicamente funciona cuando las propiedades overflow y text-overflow se usan juntas.
Otros valores de text-overflow
Hay otros valores que puedes utilizar en lugar de ellipsis:
clip (que es el valor por defecto) corta eficazmente la cadena, y también cortará las cadenas a mitad del carácter:
fade (que parece increíble, pero no es compatible ni de manera remota con ningún navegador).
" " (una cadena vacía) adjunta a la cadena truncada lo que se haya definido y evita que se corte a mitad del carácter. Esto podría ser "-" por ejemplo, o incluso text-overflow: " ✁";
Nota: la compatibilidad de los navegadores con estos valores alternativos no es tan buena como con ellipsis. Las capturas de pantalla anteriores son de Firefox, pero Chrome utiliza clip de manera predeterminada en estos casos.
Conclusión
¡Eso es todo en este consejo rápido! Buena suerte al usar la propiedad ellipsis de CSS (¿elipses?) en tus propios diseños web.
- CSS text-overflow en MDN
- text-overflow en Caniuse
