gondor: String mit ... begrenzen

Beitrag lesen

Hallo,

ich schreibe einen String in ein Div-Element.

<div style="position: absolute; top: 19px; left: 0px; width: 166px; height: 48px; overflow: hidden;">
 Tableau italienische Küche: Tomaten - Mozzarella - Avocado - Salat  /  Spaghetti mit Hackfleischbällchen in Tomatensugo  /  Pizza mit Salami und Paprika
</div>

Da der Text zur kompletten Anzeigen zu lang ist, wird mit overflow: hidden der restliche Text versteckt.

Nun möchte ich, dass mir in der letzen sichtbaren Zeile (Zeile 4) beim letzen Wort ... angehängt werden, damit deutlich wird, dass mehr Text steht als angezeigt.

Also für das Beispiel:

Tableau italienische Küche: Tomaten - Mozzarella - Avocado - Salat  /  Spaghetti mit Hackfleischbällchen in...

Wie kann ich das machen? Ist das Problem verständlich? Oder muss ich einen anderen Ansatz anwenden?

Die Texte sind sehr unterschiedlich in der Länge...

Danke für Hilfe,
gondor(..)