CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow

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.

Beidseitig beschnittener Text

So lassen sich – allerdings eben nur in Gecko-Browsern – Texte auch beiseitig beschneiden.

[Bildquellenangabe Scherenmännchen: Silke Kaiser / pixelio.de]

(dpe)