String mit ... begrenzen

[Sven Rautenberg]

Moin!

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.

Aber auch nur so halbwegs. Das Verstecken funktioniert _bei dir_ gut, weil die Schriftart, Schriftgröße und der Zeilenabstand offenbar Teiler der angegebenen Höhe von 48px des DIVs sind, die fünfte Zeile also vollständig außerhalb des sichtbaren Bereichs lagert.

Konstruier' dir einfach mal eine Situation, in der das nicht der Fall ist, z.B. weil der Browsernutzer eine Mindestschriftgröße eingestellt hat. Schon stimmt deine Zeilenhöhe nicht mehr, und der Text wird mittendrin abgeschnitten.

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

Ich plädiere für einen anderen Ansatz. Schreibe nur soviel Text ins DIV, wie reinpasst und auch nur reinpassen soll. Wenn du siehst, dass zuviel Text drinsteht, kürze den Text. Wenn du ihn kürzt, hänge "..." bzw. noch schöner das Zeichen "horizontale Ellipse" (als Entity &hellip;, als Zeichen …).

- Sven Rautenberg