Texto de ejemplo para ver como funciona la propiedad text-overflow. Al pasar el ratón por encima se ha podido acceder al texto completo, que al principio veíamos solo como una previa.
Hemos estado hablando mal de Internet Explorer en varios
artículos, pero hoy toca señalar uno de los inventos IE, que van camino de
hacerse estándar (de hecho ya está soportado por todos los navegadores) y es la
propiedad CSS text-overflow.
Solemos usar la propiedad overflow, para decir si queremos
que cuando el contenido de un bloque se sale de su contenedor se muestre, se
oculte, salgan barras de desplazamiento... Y le da igual imágenes, tablas, texto...
En el caso del texto podríamos querer mostrar una previa, y
señalar que hay una elipsis, es decir que pasando el ratón por encima o
clicando se puede acceder al texto completo. Y aquí es donde entra
text-overflow.
El valor por defecto del text-overflow-mode, es clip,
recortar cuando haya overflow por el borde y listo. Lo podemos cambiar a ellipsis
y ellipsis-word. Con el modo ellipsis, al llegar al límite mostrará un
texto de continuación (por defecto “...”) y con ellipsis-word, lo muestra después
de la última palabra que entre completa en el contenedor, no parte una palabra
para poner el texto de elipsis.
También podemos cambiar el texto de elipsis. Poner una flecha
o un “[ver]” (pongo ver y no más, porque las tildes en CSS son otro capítulo y
no me quiero enrollar).
Todo suena muy bonito, aunque tiene sus trucos. El primero,
bastante lógico, es que solo funciona en un contenedor que tenga la propiedad overflow
con valor hidden. Aunque sea evidente, tengo que recordar que hay que
dar un tamaño al contenedor, sino se expandirá para que entre el contenido.
Pero el detalle que nos puede descolocar e incluso ser molesto, es que es una
propiedad de línea. Se dispara solo cuando la palabra es tan larga que no entra
entera en su línea (osea una sola palabra llena toda la línea y aún así no
entra), sino el texto seguirá en líneas inferiores y nunca veremos la elipsis.
A menos que forcemos a que el texto esté en una línea. Por eso, aunque es
extraño, la activación y desactivación de la elipsis se hace con la propiedad white-space.
Con valor normal veremos el texto completo y con valor nowrap una previa
con elipsis.
Teniendo todo esto en cuenta el css para conseguir el div con
elipsis en el que podemos ver el texto completo al pasar el ratón por encima es:
<style>#contenedor{overflow: hidden;text-overflow: ellipsis " [ver]";white-space : nowrap;width: 300px;/** Extra para decoracion **/background-color: #d0d0d0;padding: 10px 10px 10px 10px;border-radius: 8px;}#contenedor:hover{white-space : normal;/** Extra para decoracion **/background-color: #f0f0f0;}</style>
Pd: En mi experiencia el valor ellipsis-word no estaba
implementado, al menos en firefox y chrome.
No hay comentarios:
Publicar un comentario