Añadir puntos suspensivos mediante css: propiedad text-overflow

02/05/2015 Tweet
Añadir puntos suspensivos mediante css: propiedad text-overflow

En ocasiones hemos necesitado limitar un texto dentro de su contenedor y añadirle puntos suspensivos al final pero no hemos sabido cómo sin tener que recurrir a la programación ya sea javascript o el lenguaje que estemos usando. Pues existe una propiedad css que nos va a permitir hacer esto y lo mejor de todo es que es compatible con todos los navegadores, incluído Internet Explorer en sus versiones más antiguas.Estamos hablando de la propiedad text-overflow.

Ejemplo

Imaginemos que tenemos una galería de imágenes donde debajo de cada foto aparece el nombre de la imagen. Si el nombre de la imagen es muy largo puede ocurrir lo siguiente:

Fotografía 1: Invierno
Fotografía 2: Primavera
Fotografía 3: Verano
Fotografía 4: Otoño

Para que el nombre no sea más largo que el ancho de la fotografía podemos delimitarlo con puntos suspensivos. Además para evitar que el usuario se quede sin ver el nombre completo de la fotografía podemos asignarle al atributo title el nombre de la imagen de tal manera que al pasar por encima el ratón salga un tooltip:

Fotografía 1: Invierno
Fotografía 2: Primavera
Fotografía 3: Verano
Fotografía 4: Otoño

Otra opción es que cuando se haga hover la capa de texto se expanda:

Fotografía 1: Invierno
Fotografía 2: Primavera
Fotografía 3: Verano
Fotografía 4: Otoño

Los requisitos para que esta propiedad funcione son:

  • Que tengan un ancho y una altura predefinida
  • Aplicarle la propiedad overflow a hidden. Esto es que si el contenido se desborda se oculte.
  • Forzar a que el texto haga una sóla línea. Esto se hace con la propiedad white-space

Esto traducido a css es:

.texto{
height:25px; width:100px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}

Compatibilidad en navegadores

Chrome Firefox Safari Opera Explorer
>IE7 IE8 IE9<
Sí Sí Sí Sí Sí Sí Sí

Demo