Gerade in Tabellen sind Texte oder Wörter gerne mal zu lang und müssen entweder umgebrochen oder beschnitten werden. Mit der CSS-Eigenschaft „text-overflow“ lassen sich nicht nur Texte auf eine feste Breite beschneiden, sondern auch automatisch mit Auslassungszeichen versehen. Die Eigenschaft sorgt dafür, dass ein Text nur so viel Raum einnehmen kann, wie das umschließende Element groß ist. Anders als „overflow“ funktioniert „text-overflow“ allerdings nur in der Breite und nur bei einzeiligen Texten.
Beschneiden und mit Auslassungszeichen versehen
Neben der Standardeinstellung „clip“, die einen Text einfach am Rand des umschließenden Blockelementes beschneidet – auch mitten im Buchstaben – sorgt der Wert „ellipsis“ dafür, dass am Ende des beschnittenen Textes ein Auslassungs- beziehungsweise Ellipsenzeichen (…) hinzugefügt wird. Und Buchstaben bleiben dabei immer vollständig.
Oben: Normal beschnittener Text | Unten: Mit „ellipsis“ beschnittener Text
Damit das Beschneiden funktioniert, muss das den Text umschließende Element ein Blockelement sein, welches per „overflow: hidden“ dazu gebracht wird, den darin enthaltenen Text nicht um die Breite des Textes zu vergrößern. Außerdem muss per „white-space: nowrap“ dafür gesorgt werden, dass der Text am Ende des Blockelementes nicht in die nächste Zeile umbricht:
p { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Die Eigenschaft „text-overflow“ funktioniert mit allen gängigen Browsern. Allerdings erwarten der Internet Explorer und Opera die jeweiligen Vendor-Prefixe.
Beidseitige Beschneidung
Bei Gecko-Browsern lässt sich ein Text sowohl am Anfang als auch am Ende beschneiden. Dazu muss der Text von einem weiteren Element umschlossen werden:
<p><span style="margin-left: 20px">Dampfschiffahrtsgesellschaft</span></p>
Das zweite Element – hierbei kann es sich um ein Inlineelement handeln – verschiebt man per „margin-left“ nach links aus dem Blockelement. Da das übergeordenete Blockelement auf „overflow: hidden“ gesetzt ist, verschwindet der Text also links.
Nun muss bei der Eigenschaft „text-overflow“ ein weiterer Wert angegeben werden:
p { … text-overflow: ellipsis ellipsis; }
Hat „text-overflow“ nur einen Wert, gilt er für die Bescheidung des Textes am rechten Rand. Bei zwei Werten steht der erste für die Beschneidung am linken, und der zweite für die Beschneidung am rechten Rand.
So lassen sich – allerdings eben nur in Gecko-Browsern – Texte auch beiseitig beschneiden.
[Bildquellenangabe Scherenmännchen: Silke Kaiser / pixelio.de]
(dpe)
7 Antworten zu „CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow“
— was ist Deine Meinung?
Was ist mit Browser Unterstützung, besonders mit IE7-8?
Danke.
Folgende Browser unterstützen die Eigenschaft: IE6+, Firefox 7+, Chrome 1+, Safari 1.3+, Opera 11+.
IE und Opera aber nur so?
-ms-text-overflow
-o-text-overflow
Interessante Sache!
Kennt jemand zufällig auch eine Lösung für mehrzeilige Texte?
Würde mich auch sehr interessieren!
Für mehrzeilige Texte gibt es meines Wissens keine Lösung mit „text-overflow“. Das Ganze funktioniert nur mit einzeiligen Texten.
Interessanter Artikel, aber…
„Die Eigenschaft „text-overflow“ funktioniert mit allen gängigen Browsern. Allerdings erwarten der Internet Explorer und Opera die jeweiligen Vendor-Prefixe.“
…warum nicht gleich diese „Verdor-Prefixe“ im Artikel angeben?