Ein Wort mit Überlauf ausblenden: Versteckt

Question

Gibt es eine Möglichkeit, CSS zu verwenden, um ein Wort nach dem anderen auszublenden (statt eines Buchstabens), wenn ein Element nicht breit genug ist, um seinen Textinhalt anzuzeigen?

Zum Beispiel mit dem folgenden Code, wenn die Browser-Fenster klein werden den ganzen Satz zu zeigen, ich will es Lorem ipsum dolor sit... zeigen, statt Lorem ipsum dolor sit ame...

HTML:

<div>Lorem ipsum dolor sit amet</div> 

CSS:

div { overflow:hidden; text-overflow:ellipsis; white-space-nowrap; } 

(ich brauche keine alten Browsern zu unterstützen)

Answer 1

Sie könnten Ihren Container immer so einstellen, dass er die gleiche Höhe wie eine einzelne Textzeile hat, und nur den Text ausblenden, der unter dieser Zeile liegt, indem Sie overflow: hidden verwenden.

http://jsfiddle.net/Wexcode/fbhxL/

p.short { 
    height: 18px; 
    overflow: hidden; } 
p.ellipsis { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; }