Mostra normalmente il testo troncato, ma mostra il testo completo al volo stazionario

Question

Ho un div con un paragrafo o più di testo al suo interno. Mi piacerebbe che mostrasse normalmente le prime parole, ma espandi per mostrare il testo completo al passaggio del mouse. Idealmente, mi piacerebbe farlo solo con CSS e senza duplicazione dei dati.

Questo è quello che ho provato: http://jsfiddle.net/SEgun/

Non voglio div a muoversi quando il testo si espande, solo per div 2 per espandere per visualizzare il testo completo copre div 3. È possibile? Post scriptum Non mi importa dei browser ritardati.

Answer 1

Il CSS sotto farà sì che il div a "coprire" tutto sotto di essa in modo da non spingere alcun contenuto verso il basso.

position: absolute; 
background-color:#FFF; 

Il colore di sfondo è importante per cui non è possibile vedere il materiale sottostante.

Per assicurarsi che tutto rimanga nello stesso posto, è possibile assegnare all'elemento successivo un margine superiore dello stesso valore dell'altezza della riga. Il segno + è il selettore adjacent sibling.

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

DEMO

Answer 2

Che dire di questo: http://jsfiddle.net/KGqnj/