CSS, Diseño, ¿Cómo se hace?

Propiedad text-overflow CSS3

Hola amigos después de unos días sin escribir les traigo un post bien sencillo y es para hablar de la propiedad text-overflow del CSS3.

text-overflow   es una propiedad bastante útil. Nos permite indicar qué aspecto tendrá un texto cuando sobrepasa el espacio disponible dentro de una caja. Más concretamente, cómo queremos que se señale al usuario que un texto no se está pudiendo visualizar completamente dentro del elemento donde se encuentra.

Antes de CSS3, cuando queríamos que se señale al usuario que un texto no se muestra por completo, teníamos que introducir algo de programación, para detectar los casos en los que era muy largo y entonces cortarlo programáticamente. Esa situación puede seguir siendo necesaria en muchos casos, pero realmente en muchos otros es un gasto de tiempo innecesario, porque el propio CSS puede cortarla en el lugar adecuado y mostrarlo al usuario convenientemente.

Es una propiedad sencilla de usar, por lo que no requerirá muchas explicaciones, pero no todo el mundo la conoce y la usa habitualmente. Sobre todo es interesante un valor en concreto de entre los posibles de la propiedad: “ellipsis”, que nos introduce tres puntos suspensivos al final del texto que se está cortando.

.texto-potencialmente-largo {
     text-overflow: ellipsis;
 }

Esto lo que quiere decir es que, si el texto potencialmente largo no cabe en la anchura del elemento, le coloque tres puntos suspensivos para que el usuario sea consciente de ello.

Puedes ver el efecto en la imagen siguiente, en la que mi nombre no cabe por completo en la caja donde está situado:

Nota: Ten en cuenta que con otras propiedades de CSS puedes indicar qué quieres que pase con ese texto potencialmente largo, por ejemplo que desborde la caja o que se muestre hasta donde pueda según su tamaño, que se recorten las palabras con saltos de línea o que se muestren todas en la misma línea. La propiedad text-overflow lo que nos indica es cómo se debe representar visualmente ese recorte en el texto.

Posibles valores de text-overflow

Como posibles valores de esta propiedad encontramos:

  • clip: Es el valor predeterminado y quiere decir que el texto simplemente se recortará, sin mostrar ningún efecto además del propio recorte donde toque.
  • ellipsis: Coloca tres puntos suspensivos al lado del texto, indicando que el texto no cabe completamente.
  • string: Se prevé que se pueda indicar una cadena para colocar en vez de los puntos suspensivos. Su valor sería por ejemplo “–” y colocaría esa cadena al final del texto recortado. Sin embargo, esta funcionalidad es solo experimental y no funciona realmente en todos los navegadores, por lo que no se recomienda usar.
  • fade: es otro valor experimental, que sirve para generar un efecto “fade-out” su valor puede ser una longitud y un porcentaje, pero de momento no se puede usar. Además puedes colocar los valores “initial” e “inherit” para restaurar la propiedad a su valor inicial o que herede del contenedor donde está situado.

Compatibilidad de text-overflow

Esta propiedad se puede usar sin problema alguno, ya que es compatible con todos los navegadores, incluso muchos que son realmente antiguos.

La soportan IE desde la versión 6 y prácticamente todos los demás, incluidos por supuesto Firefox, Chrome, etc.

Solo ten en cuenta que los valores que realmente te funcionarán son “clip” el predeterminado (que no muestra nada) y “ellipsis” que permite colocar esos tres puntos suspensivos que hemos explicado ya.

 

Acerca de Daniela Faife Beltran

Diseñadora gráfica y para la web. Miembro del grupo WebDevCuba desde su fundación. Amante de las series y sobre todo del color azul.

Deja un comentario

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