text-overflow CSS3

Repasamos las posibilidades de la propiedad text-overflow de CSS3

Con text-overflow tenemos una propiedad de CSS3 muy útil para crear una 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.

Deja una respuesta

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

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora