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:
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:
Otra opción es que cuando se haga hover la capa de texto se expanda:
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:
Compatibilidad en navegadores
 |
 |
 |
 |
 |
||
|---|---|---|---|---|---|---|
| >IE7 | IE8 | IE9< | ||||
 |
|
|
|
|
|
|