JMiur [E]

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.

6 comentarios:

EDS  

Qué bueno... puede ser muy útil.

Responder
Beben Koben  

add cursor style
to be more good master...
cursor: n-resize;
;)

Responder
CONTOH ASKEP  

i like it

Responder
Lewis Yuburí  

Hola, buen día JMiur (Día en Venezuela) se que ya han pasado años desde la publicación de este articulo, pero quería saber si esta propiedad podría usarse para dos lineas; me explico: tengo un contenedor de ancho relativamente reducido donde muestro un texto amplio, pero quiero recortarlo a solo dos lineas y que luego muestre el "…". Espero su pronta respuesta, y gracias.

JMiur  

Hasta donde sé, sólo se aplica a una sola línea ya que requiere que esté activada la propiedad white-space

Responder
MakeUp-Finds  

Gracias JMiur por esta entrada y tu ayuda, sin ella no hubiera sido posible y no encontraba la solución por ninguna parte.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR