Abschneiden zu langer Inhalte

Autor
Gunnar Bittersmann
Letzte Änderung
2011-10-16
Vorherige Verion
http://bittersmann.de/articles/ellipsis/article-20090106

Zusammenfassung

Dieser Artikel beschreibt Probleme mit serverseitigem Abschneiden nach n Buchstaben und zeigt eine clientseitige Alternative mit der CSS-Eigenschaft text-overflow.

Serverseitiges Abschneiden sucks

In Blogs, Foren u.a. Web-2.0-Anwendungen besteht oft der Wunsch, Nutzereingaben auf eine Zeile bestimmter Breite zu begrenzen und dies mittels Ellipse '…' kenntlich zu machen.

Oft wird dazu serverseitig der Text nach n Buchstaben abgeschnitten. Dies ist jedoch alles andere als optimal, denn:

Kurzum: Es ist unmöglich, eine für alle Nutzer passende Zahl n zu finden.

Clientseitiges Abschneiden rocks

Die gute Nachricht: Das serverseitige Abschneiden ist völlig überflüssig. Aktuelle Browser können das mit CSS!

Obwohl die Eigenschaft text-overflow noch nicht in die CSS3-Spezifikation aufgenommen wurde [CSS3-TEXT], wird sie von allen gängigen Browsern (Internet Explorer, Firefox, Webkits (Safari, Chrome), Opera) schon interpretiert.

Im Stylesheet (wobei die Breite exemplarisch ist) steht:

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 42em; }

Und so sieht es aus: Beispielseite | im Iframe:

Referenzen

CSS3-TEXT
CSS Text Level 3, W3C working draft, 2011-09-01, http://www.w3.org/TR/2011/WD-css3-text-20110901/; neuste Version verfügbar unter http://www.w3.org/TR/css3-text/