Dieser Artikel beschreibt Probleme mit serverseitigem Abschneiden nach n Buchstaben und zeigt eine clientseitige Alternative mit der CSS-Eigenschaft text-overflow.
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.
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: