Automatisch "..." hinzufügen, wenn der Text eine gewisse Breite hat, aber beim Schweben angezeigt wird?

Question

Ich versuche, folgendes zu tun, mit einer <div> bestimmter Breite, sagen wir 30% und als 1 Zeile Text, aber ich möchte ... zeigen, wenn Text zu lang ist, wird auch die Breite der <div> wird sich ändern Da es sich um ein responsives Design handelt, sollte sich ... entsprechend anpassen. Aber wenn eine Person über diese <div> schwebt, sollte sie ihre Breite erweitern (sie wird absolut positioniert sein, so dass das Verlassen bestimmter Grenzen erlaubt ist.) Und den gesamten Text in derselben Zeile anzeigen.

Beispiel:

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. 

Nicht sicher, ob es mit reinen HTML und CSS und Arbeit Cross-Browser durchgeführt werden kann, vielleicht einiger Überlauf versteckt Backup? oder JQuery, wenn es nicht mit etwas anderem erreicht werden kann.

Answer 1

Dies ist möglich mit pure CSS:

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

#test:hover { 
    overflow: visible; 
} 

http://jsfiddle.net/qyNUG/

Answer 2

Dies ist eine css3 Version, die auf einer Pixelbreite basiert. Wenn Sie einen Container hatten, der eine bestimmte Größe hatte, in der Sie diesen Text zum Arbeiten brauchten, dann könnten Sie width: 100%; darin arbeiten.

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; 
}