Text Overflow

Manchmal passt Text nicht in den verfügbaren Platz: Ein einzelnes Wort ist zu lang oder eine ganze Zeile läuft über. CSS bietet verschiedene Möglichkeiten, mit solchen Inhalten umzugehen.

  • text-overflow kennzeichnet abgeschnittenen Text
  • overflow-wrap erlaubt den Umbruch zu langer Wörter
  • word-break steuert Umbrüche innerhalb von Wörtern

text-overflow

text-overflow legt fest, wie abgeschnittener Text gekennzeichnet wird. Die Eigenschaft erzeugt selbst keinen Überlauf.

  • clipText wird ohne Kennzeichnung abgeschnitten
  • ellipsisEine Ellipse (…) weist auf weiteren Text hin

Text mit Ellipsis

Für eine einzelne gekürzte Textzeile werden drei Eigenschaften kombiniert:

Donaudampfschifffahrtsgesellschaftskapitän und Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz sind sehr lange deutsche Wörter. 

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Hinweis: Dieses Beispiel kürzt den Text auf eine Zeile. Für eine Begrenzung auf mehrere Zeilen wird line-clamp verwendet.

overflow-wrap (word-wrap)

overflow-wrap bestimmt, ob eine zu lange Zeichenfolge umgebrochen werden darf, damit sie nicht aus ihrem Container läuft. word-wrap ist der ältere Name und funktioniert weiterhin als Alias.

  • normalUmbruch nur an regulären Umbruchstellen
  • anywhereBricht eine zu lange Zeichenfolge bei Bedarf an einer beliebigen Stelle um
  • break-wordVerhält sich ähnlich wie anywhere, berücksichtigt den zusätzlichen Umbruch aber nicht bei der Berechnung von min-content

Lange URLs umbrechen

Hier ist eine URL: https://www.beispiel-website.de/sehr/langer/pfad/zu/einer/datei.html 

.text {
  overflow-wrap: anywhere;
}

word-break

word-break bestimmt, ob Zeilenumbrüche innerhalb von Wörtern erlaubt sind.

  • normalVerwendet die üblichen Umbruchregeln der jeweiligen Sprache
  • break-allErlaubt einen Umbruch zwischen beliebigen Zeichen
  • keep-allVerhindert Wortumbrüche in chinesischen, japanischen und koreanischen Texten
  • break-wordVeraltet – stattdessen overflow-wrap: anywhere verwenden

Umbruch mitten im Wort

Mit break-all können auch ganz normale Wörter mitten im Wort umgebrochen werden, sobald das Zeilenende erreicht ist. 

.text {
  word-break: break-all;
}

Hinweis: Für lange URLs oder Zeichenfolgen ist overflow-wrap: anywhere meist die bessere Wahl, weil normale Wörter nicht unnötig getrennt werden.

Kurz gesagt

  • text-overflow kennzeichnet abgeschnittenen Text mit clip oder ellipsis
  • overflow-wrap verhindert, dass lange Wörter oder Zeichenfolgen aus dem Container laufen
  • word-break erlaubt Umbrüche innerhalb von Wörtern und sollte zurückhaltend eingesetzt werden

Siehe auch: hyphens & Zeilenbreite (ch) | Text-Umbruch (text-wrap, white-space)

Nurse Probier alle Werte live im Text Wrap Composer aus.