Text-Umbruch

CSS bietet verschiedene Möglichkeiten, Text auf mehrere Zeilen zu verteilen und den Umgang mit Leerzeichen und Zeilenumbrüchen zu steuern.

• text-wrap steuert, wie Text auf mehrere Zeilen verteilt wird
• white-space steuert, wie Leerzeichen und Zeilenumbrüche behandelt werden

---

text-wrap

text-wrap steuert, ob und wie der Browser Text auf mehrere Zeilen verteilt.

• wrapText wird normal umgebrochen (Standard)
• nowrapVerhindert Zeilenumbrüche, ohne den Umgang mit Leerzeichen zu verändern. Siehe auch white-space.
• balanceVerteilt kurze Texte möglichst gleichmässig auf mehrere Zeilen
• prettyOptimiert den Umbruch längerer Texte zugunsten eines schöneren Satzbilds
• stableHält beim Bearbeiten bereits gesetzte Zeilen möglichst stabil

Ausgewogene Überschriften

balance eignet sich besonders für kurze, mehrzeilige Überschriften.

Dynamische Typografie braucht ausgewogene Zeilen.

h1 {
  text-wrap: balance;
}

Nicht für lange Fliesstexte: text-wrap: balance ist für kurze Textblöcke wie Überschriften gedacht. Browser wenden die Berechnung nur auf eine begrenzte Anzahl Zeilen an. Für längere Absätze eignet sich text-wrap: pretty.

---

white-space

white-space kontrolliert, wie Leerzeichen und Zeilenumbrüche behandelt werden.

• normalMehrfach-Leerzeichen werden zusammengefasst, automatischer Umbruch
• nowrapVerhindert Zeilenumbrüche und fasst mehrere Leerzeichen zusammen. Siehe auch text-wrap.
• preLeerzeichen/Umbrüche bleiben erhalten, kein automatischer Umbruch
• pre-wrapLeerzeichen/Umbrüche bleiben erhalten, mit automatischem Umbruch
• pre-lineUmbrüche bleiben erhalten, Mehrfach-Leerzeichen werden zusammengefasst, mit automatischem Umbruch

Beispiele

white-space und ellipsis

white-space: nowrap verhindert den Zeilenumbruch. In Kombination mit text-overflow: ellipsis wird abgeschnittener Text mit drei Punkten gekennzeichnet. Mehr dazu unter Text Overflow.

Dieser sehr lange Text wird nicht umgebrochen und zeigt stattdessen drei Punkte am Ende

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

Leerzeichen und Zeilenumbrüche erhalten

white-space: pre übernimmt Leerzeichen und Zeilenumbrüche aus dem HTML. Lange Zeilen werden nicht automatisch umgebrochen.

white-space: pre

Dieser Text behält alle Leerzeichen und Zeilenumbrüche!

.white-space-pre {
    white-space: pre;
}

Eingegebene Texte mit Zeilenumbrüchen

white-space: pre-wrap eignet sich für Kommentare oder Chatnachrichten. Leerzeichen und eingegebene Zeilenumbrüche bleiben erhalten, lange Zeilen werden innerhalb der Box automatisch umgebrochen.

Hallo zusammen Diese Nachricht enthält einen eingegebenen Zeilenumbruch und zusätzlich eine sehr lange Textzeile, die innerhalb der schmalen Box automatisch auf mehrere Zeilen umgebrochen wird.

.message {
  white-space: pre-wrap;
}

---

ASCII-Art mit white-space: pre

Zum Abschluss ein kleines Beispiel, wie white-space: pre für ASCII-Art verwendet werden kann. Das <pre>–Tag setzt automatisch white-space: pre — das ist sein Standard-Verhalten.

    ( (
     ) )
  ........
  |      |]
  \      /
   `----'

Zeit für eine kleine Kaffeepause.

(_)_ __ | |_ ___ _ __  ___(_)_   _____| |_ __ _| |_(_) ___  _ __
| | '_ \| __/ _ \ '_ \/ __| \ \ / / __| __/ _` | __| |/ _ \| '_ \
| | | | | ||  __/ | | \__ \ |\ V /\__ \ || (_| | |_| | (_) | | | |
|_|_| |_|\__\___|_| |_|___/_| \_/ |___/\__\__,_|\__|_|\___/|_| |_|

.ascii-art {
  white-space: pre;
  font-family: monospace;
  font-size: clamp(8px, 2vw, 16px); /*  Mobile klein, Desktop grösser */
  overflow-x: auto; /* Falls es zu breit wird */
}

---

Kurz gesagt

• text-wrap steuert die Verteilung des Textes auf mehrere Zeilen.
• white-space steuert Leerzeichen und Zeilenumbrüche.

---

Siehe auch: hyphens & Zeilenbreite (ch) | Text Overflow (text-overflow, word-break, overflow-wrap)

---

Probier alle Werte live im Text Wrap Composer aus.

---