Text-overflow: Vista previa de un texto con CSS

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.