Bueno, ahora ya el Dios Posibilidad te abre la mano.
Si quieres trabajar con
una linea sola, puedes usar un compendio cada vez más usado:
Código CSS:
Ver originalspan.titulo {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Esto lo que hace es que tu texto no tenga saltos de linea —nowrap—, el texto que se sobrepase se oculta —overflow— y en caso de haber texto oculto añade
tres puntos (...) puntos suspensivos (…) al texto —text-overflow— dando a entender al usuario que el título es más de lo que aparece.
La segunda opción, es mostrar todo el título pero
siempre alineado abajo:
Código CSS:
Ver originaldiv.contenedor_imagen {
position: relative;
}
span.titulo {
position: absolute;
bottom: 0;
}
El
text-overflow: ellipsis funciona sólo para texto de una sola linea. Pero hay
un plugin para jQuery que lo hace posible para
varias lineas. No lo he probado.
Luego también puedes
no mostrar el título si no sólo al pasar por encima con
:hover, o usar la primera opción con los puntos suspensivos y
luego al pasar por encima mostrar el título completo, etc.