Aggiungi automaticamente "..." se il testo estende una certa larghezza, ma lo mostra al passaggio del mouse?

Question

Sto cercando di fare quanto segue, avendo un <div> di certa larghezza, diciamo 30% e di 1 riga di testo, tuttavia voglio mostrare ... se il testo è troppo lungo, anche la larghezza del cambierà , poiché è un design reattivo, quindi ... dovrebbe essere regolato di conseguenza. Ma se una persona si libra sopra quella <div>, dovrebbe estendere la sua larghezza (sarà posizionata in modo assoluto, quindi è consentito uscire da determinati bordi) e mostrare tutto il testo, sulla stessa riga.

Esempio:

This is text that fits 

This is text that doesn't fit inside ... 

This is text that doesn't fit inside, but is visible on hover. 

Non so se può essere fatto con puro HTML e CSS e il browser opera croce, forse un po 'troppo pieno nascosto backup? o JQuery, se non può essere raggiunto con altro.

Answer 1

Questo è possibile con pure CSS:

#test { 
    width: 50px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

#test:hover { 
    overflow: visible; 
} 

http://jsfiddle.net/qyNUG/

Answer 2

Questa è una versione css3 che si basa su una larghezza di pixel. Se avessi un contenitore di una certa dimensione in cui il testo dovesse funzionare, potresti usare width: 100%; lavorare al suo interno.

jsfiddle

<p>This is text that doesn't fit inside, but is visible on hover.</p> 


p { 
    display: inline-block; 
    max-width: 200px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
p:hover { 
    max-width: none; 
}