Advertisement
  1. Web Design
  2. CSS

Cómo controlar text overflow (con ellipsis de CSS)

by
Read Time:2 minsLanguages:

Spanish (Español) translation by Carlos (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):

text is too long!text is too long!text is too long!

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:

overflow: hiddenoverflow: hiddenoverflow: hidden

¡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:

text overflow ellipsistext overflow ellipsistext overflow ellipsis

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:

clipped textclipped textclipped text

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: " ✁";

scissorsscissorsscissors

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.