CSS: Abschneiden zu langer Texte

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:

Ein etwas längerer Beispiel-Text, welcher für diese Box zu lang ist.

(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.

8 comments on “CSS: Abschneiden zu langer Texte

  1. Ich habs soeben auf meiner Website ganz unten bei “Neue Projekte” eingebaut. Klappt super mit Safar 7.0.6 und Firefox 31.0
    Leider fehlen mir die “Drei Punkte” am Ende.
    Hab ich da was falsch gemacht? Gibts da schon eine Neuerung zu diesem Code?
    Ansonsten TOP! Vielen Dank!

  2. text-overflow: ellipsis;

    ist für die “Drei Punkte” verantwortlich. Richtig geschrieben und eingebunden?

    1. Ja, ich glaub es ist alles richtig geschrieben.
      Ist vielleicht etwas zu viel?

      {
      	margin-left:0px;
      	list-style-image:url(../../../images/icons/hilfe-pfeil-hell.png);
      	list-style-position: inside;
      	margin-top:15px;
      	font-weight:normal;
      	font-size:12px;
      	line-height:13px;
      	overflow: hidden;
        	text-overflow: ellipsis;
        	-o-text-overflow: ellipsis;
        	white-space: nowrap;
        	width: 240px;
      }
      1. Es scheint als ob du die Eigenschaft auf eine Liste anwenden möchtest. In dem Fall musst du die Eigenschaft text-overflow:ellipsis dem Listitem (<li>) und nicht der gesamten Liste zuweisen.

        li {
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        ...

Leave a Reply

Your email address will not be published. Required fields are marked *