Mostrar el texto truncado normalmente, pero mostrar el texto completo en el control deslizante

Question

Tengo un div con un párrafo o menos de texto dentro de él. Me gustaría que muestre las primeras palabras normalmente, pero amplíese para mostrar el texto completo en el vuelo estacionario. Idealmente, me gustaría hacerlo solo con CSS y sin duplicación de datos.

Esto es lo que he intentado: http://jsfiddle.net/SEgun/

no quiero que los divs a moverse cuando el texto se expande, sólo para div 2 para expandir para mostrar el texto completo cubriendo div 3. ¿Es esto posible? PD No me preocupan los navegadores retrasados.

Answer 1

El CSS a continuación hará que el div a "cubrir" todo debajo de ella para que no se introduzca ningún contenido hacia abajo.

position: absolute; 
background-color:#FFF; 

El color de fondo es importante por lo que no puede ver las cosas a continuación.

Para asegurarse de que todo permanezca en el mismo lugar, puede darle al siguiente elemento un margen superior del mismo valor que el alto de la línea. El signo + es el selector adjacent sibling.

div { 
    line-height: 20px; 
} 
#data:hover+div { 
    margin-top:20px; 
} 

DEMO

Answer 2

Qué tal esto: http://jsfiddle.net/KGqnj/