Repasamos las posibilidades de la propiedad text-overflow de CSS3

Con text-overflow tenemos una propiedad de CSS3 muy útil para la maquetación web, ya que nos permite decidir qué aspecto tendrá un texto que no cabe dentro de la caja donde lo hemos ubicado, algo que antes había que solucionar a base de programación, detectando cuando no se mostraba la totalidad de un texto.

Utilizar la propiedad text-overflow es muy fácil. En el siguiente ejemplo vemos un valor, que poca gente utiliza, y que resulta muy interesante: ellipsis introduce tres puntos al final del texto que se está cortando:

.texto-masLargoQuelaCaja {
 text-overflow: ellipsis;
 }

Valores que podemos dar a text-overflow

A continuación, repasamos los principales valores que podemos dar a esta propiedad:

  • clip. Este es el valor predeterminado y no aplicará ningún efecto, simplemente realizará el recorte del texto.
  • ellipsis. Como hemos visto en el ejemplo, nos colocará tres puntos suspensivos al final del texto, indicando al usuario que el texto no cabe totalmente.
  • string. Es un valor que está todavía implementado experimentalmente y podría no funcionar en todos los navegadores, por lo que su uso no se recomienda. Lo que hace es colocar una cadena en lugar de los puntos suspensivos.
  • fade. Al igual que el anterior, este valor también está en fase experimental y su función es la de realizar un efecto de fundido fade-out, cuyos valores pueden ser una longitud y un porcentaje. También se pueden emplazar los valores initial e inherit para resetear a sus valores iniciales o heredarlos del contenedor donde está situado.

Compatibilidad de text-overflow

Aunque con algunas limitaciones, esta propiedad se puede utilizar en todos los  los navegadores, incluso con algunos que están ya un poco desfasados en el tiempo, ejemplo de ello es que IE lo soporta desde la versión 6 y por supuesto FireFox, Chrome, Opera y Safari. Eso sí, los únicos valores que funcionan son los más útiles: clip y ellipsis.

Muy relacionados con la la adaptación de los textos al diseño, también te pueden resultar interesantes los artículos  Cómo utilizar el atributo overflow-wrap para romper palabras en varias líneas,  Cómo adaptar los textos a las formas de una imagenCómo adaptar los textos a las formas de una imagen y Cómo crear un bocadillo de cómic con CSS.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *