Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Denis Potschien 12. April 2012

CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow

Kein Beitragsbild

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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.