CSS text-overflow – überlangen Text kürzen

CSS text-overflow

text-overflow kürzt überlange Wörter mit einer Kennzeichnung, und kann zudem überlange Texte auf eine Zeile kürzen. Wenn ein Text oder ein Wort zu lang für den umfassenden Block sind, dehnen sie den Block oder werden abgeschnitten und u.U. unleserlich.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Langen Text kürzen

Vor allem in den Navigationselementen dynamischer Inhalte führen überlange Wörter oder ein zu langer Text zu einem Bruch des Layouts. overflow:hidden beschränkt den Text zwar auf die Maße des umfassenden Blocks, aber schneidet dabei mitten durch die Zeichen.

Die Auslassungspunkte zeigen meist an, dass der Text an anderer Stelle vollständig vorhanden ist – z.B. in den Links von Navigationslementen oder einem »Mehr dazu«.

Trompetenbaum-Blattkrone
  1. Überlanger Text ohne Beschränkung
  2. Überlanger Text mit Beschränkung durch overflow: hidden

text-overflow ellipsis

Damit der Leser erkennt, dass ein Text gekürzt ist, zeigt text-overflow: ellipsis die Kürzung durch drei Auslassungspunkte (Hellip, auch Ellipse) an.

  • width height Breite und Höhe von Blöcken
  • calc Breite / Höhe berechnen
  • min-height, max-height • Höhe begrenzen
  • min-width, max-width • Breite begrenzen
  • visibility Sichtbar / versteckt
  • overflow • Anzeige übergroße Inhalte

white-space: nowrap beschränkt den Text auf eine Zeile. Wenn die Eigenschaft white-space : nowrap fehlt, wird der Text umgebrochen und vollständig angezeigt, aber der Browser kürzt überlange Wörter wie Trompetenbaum-Blattkronen und das Layout steht. Praktisch und sinnvoll für Navigationsleisten.

.textoverflow li { 
	width:48%;
	max-width: 220px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}

Bei Kurzfristenergieversorgungssicherungsmaßnahmenverordnung-EnSikuMaV (Energiespar-Gesetz) hilft dann auch text-overflow nicht.

text-overflow wird von allen Browser unterstützt, auch von älteren Versionen von IE.

ellipsis – Auslassungszeichen

Das Auslassungszeichen … ellipsis setzt drei Punkte in die Breite eines Zeichens –. Frankreich und Spanien hingegen nutzen drei einzelne Punkte als Auslassungszeichen (points de suspension). text-overflow sieht auch eigene Angaben als Signal der Kürzung vor.

text-overflow:'...';

oder

text-overflow:' *** ';
Trompetenbaum-Blattkrone

Da spielt aber nur Firefox mit und obendrein mosert der Validator. Also bei text-overflow:ellipsis bleiben …

line-clamp – Zeilen begrenzen

line-clamp begrenzt die Zahl der Zeilen in einem Textblock. line-clamp: 1 ist im Grunde genommen das neue text-overflow.

.clamped {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical; 
}

Elementar: Genauso wie text-overflow braucht auch line-clamp die Eigenschaft overflow: hidden und muss in Kombination mit display: -webkit-box gesetzt werden. Ohne weitere Angaben endet die letzte Zeile mit einem Auslassungszeichen (Ellipsis – drei Punkte). Wenn der Text zu kurz ist, um die gewünschte Zahl von Zeilen zu erreichen, wird er in voller Länge und mit weniger Zeilen angezeigt.