Dieser Artikel beschreibt Probleme mit serverseitigem Abschneiden nach n Buchstaben und zeigt eine clientseitige Alternative mit der CSS-Eigenschaft text-overflow bzw. mit XUL.
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 Internet Explorer und Webkits (Safari, Chrome) schon interpretiert. Opera kennt sie bislang nur mit dem Opera-spezifischen Präfix als -o-text-overflow.
Im Stylesheet (wobei die Breite exemplarisch ist) steht:
.ellipsis
{
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 42em;
-moz-binding: url("bindings.xml#ellipsis");
}
Die letzte Zeile ist für Firefox, der text-overflow noch nicht interpretiert (auch in der Version 3.1 Beta 2 nicht). Im Firefox 3 lässt sich das Gewünschte aber mit XUL erzielen. [Koppes] In bindings.xml steht:
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text">
<children/>
</xul:description>
</content>
</binding>
</bindings>
Und so sieht es aus: Beispielseite | im Iframe:
Ein kleiner Wermutstropfen bleibt: Der Nutzer kann den abgeschnittenen Text im Firefox nicht markieren.
Der Firefox 2 bleibt auf der Strecke: Es wird keine Ellipse angezeigt und eventuell mitten in einem Buchstaben abgeschnitten. Das ist aber nicht tragisch: Zum einen ist das lediglich ein kosmetisches Problem, die Funktionalität wird nicht beeinträchtigt; zum anderen sind die Tage des Firefox 2 bereits gezählt, Mozilla hat den Support eingestellt und ruft die Nutzer zum Upgrade auf Firefox 3 auf.