La propiedad text-overflow

A partir de su actualización a la reciente versión 7, los usuarios de Firefox ya tienen disponible una nueva propiedad CSS que también es aceptada por el resto de los navegadores. Se trata de text-overflow que nos permite cortar un texto y agregarle un elipse de modo automático.

Un elipse no es otra cosa que un carácter especial (tres puntitos) que también podemos escribir de manera manual utilizando entities como …

Usamos los puntitos: … … … … … … … …

No es una propiedad nueva, fue inventada por Microsoft hace tiempo y ya funcionaba en IE6 pero ya es universal así que funciona en cualquier navegador: Internet Explorer, Safari|Chrome, Opera y ahora Firefox.

No tiene muchos misterios, es sencilla y se aplica a casi cualquier etiqueta siempre y cuando esta posea otras propiedades extras. Por ejemplo, así defino una clase:

.elipse {  
  text-overflow: ellipsis;
  overflow: hidden;
  width: valorpx;
  white-space: nowrap;
  word-wrap: normal;
}

Los requisitos son que la propiedad overflow sea cualquier valor excepto visible, white-space tenga el valor nowrap o pre, que la etiqueta tenga un ancho establecido y yo agregaría que word-wrap tenga el valor normal ya que si es break-word, en IE no funciona bien.

Eventualmente, hay quienes agregan dos propiedades más pero, son innecesarias:

-o-text-overflow: ellipsis; /* para versiones de Opera inferiores a la 11*/
-ms-text-overflow: ellipsis; /* para IE8*/

¿Cómo funciona? Este es un DIV donde hay un texto:

Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.

Ahora establezco un ancho:

Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.

Si quisiera cortarlo, debería darle una altura y ocultar lo que sobra con overflow: hidden:

Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.

Usando text-overflow, lo puedo hace de manera más simple y agregar los puntitos al final:

Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.

Lo mismo con otro ancho:

Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.

A partir de ahí, con un poco de JavaScript, podemos crear contenedores que se expandan y contraigan con un click:

Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.