Des öfteren kommt es vor, dass man Text-Ausgaben (beispielsweise für Tabellen) nur gekürzt darstellen möchte. Dies würde sich zwar schon beim Zusammenstellen des HTML-Codes serverseitig realisieren lassen, allerdings führt ein einfaches Abschneiden des Textes nach n Zeichen (besonders bei Nicht-Monospace-Schriftarten) nicht zu einer einheitlichen “Textlänge”. Eine Möglichkeit bietet hierbei die CSS-Eigenschaft text-overflow
.
Dabei kann der Text eines Block-Elements clientseitig auf eine bestimmte Länge (und zwar auf die Breite des Block-Elements) gekürzt werden. Der Abgeschnittene Text wird dabei mit 3 Punkten beendet.
Mit den folgenden CSS-Definitionen:
1
2
3
4
5
6
7
|
.ellipsis { overflow : hidden ; text-overflow : ellipsis; -o- text-overflow : ellipsis; white-space : nowrap ; width : 200px ; } |
… und diesem HTML-Code:
1
2
3
|
< div class = "ellipsis" > Ein etwas längerer Beispiel-Text, welcher für diese Box zu lang ist. </ div > |
… erhält man folgende Ausgabe:
(HTML)
(Screenshot)
Die Angabe text-overflow: ellipsis;
ist zwar noch kein fester Bestandteil von CSS3, wird aber bereits vom Internet Explorer (oh wunder) und Webkit-Browsern (Safari, Chrome) unterstützt. Opera interpretiert in diesem Beispiel die Zeile -o-text-overflow: ellipsis;
. Firefox unterstützt text-overflow
leider noch nicht, was aber mit einem kleinen Workarround (siehe bittersmann.de) korrigiert werden kann.
Leave a Reply