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.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.