Das ist Text mit mehreren Leerzeichen und einem Zeilenumbruch im HTML.
``` Ohne besondere CSS-Regeln wird das im Browser ungefähr wie ein normaler Satz dargestellt – also nicht mit exakt denselben Leerzeichen und Zeilenumbrüchen wie im Quelltext. --- # `white-space` – die zentrale Eigenschaft Die wichtigste Eigenschaft für White Space ist **`white-space`**. Sie steuert vor allem: - ob Leerzeichen zusammengefasst werden - ob Zeilenumbrüche aus dem Quelltext erhalten bleiben - ob automatischer Zeilenumbruch erlaubt ist ## Syntax ```css .element { white-space: normal; } ``` ## Die wichtigsten Werte ### `white-space: normal` Das ist das Standardverhalten. - Mehrere Leerzeichen werden zusammengefasst. - Zeilenumbrüche im Quelltext werden ignoriert bzw. wie normale Leerzeichen behandelt. - Automatischer Zeilenumbruch ist erlaubt. ```css p { white-space: normal; } ``` **Typischer Einsatz:** normaler Fließtext. --- ### `white-space: nowrap` - Leerzeichen werden weiterhin zusammengefasst. - Zeilenumbrüche aus dem Quelltext werden nicht als echte neue Zeilen behandelt. - **Automatischer Zeilenumbruch wird verhindert.** ```css .badge { white-space: nowrap; } ``` **Effekt:** Der gesamte Text bleibt in einer Zeile, sofern nicht explizit ein ``.
- Leerzeichen bleiben erhalten.
- Zeilenumbrüche bleiben erhalten.
- Automatischer Umbruch findet **nicht** statt.
```css
pre,
.code-like {
white-space: pre;
}
```
**Typischer Einsatz:**
- Codeblöcke
- ASCII-Layouts
- Inhalte, bei denen exakte Einrückung relevant ist
---
### `white-space: pre-wrap`
- Leerzeichen bleiben erhalten.
- Zeilenumbrüche bleiben erhalten.
- Automatischer Zeilenumbruch ist **zusätzlich** erlaubt.
```css
.message {
white-space: pre-wrap;
}
```
Das ist sehr praktisch für Inhalte wie:
- Benutzereingaben
- Chat-Nachrichten
- Kommentare
- Texte aus Textareas
Denn damit bleiben manuelle Zeilenumbrüche erhalten, aber lange Zeilen können dennoch umbrechen.
---
### `white-space: pre-line`
- Mehrere Leerzeichen werden zusammengefasst.
- Zeilenumbrüche bleiben erhalten.
- Automatischer Zeilenumbruch ist erlaubt.
```css
.poem {
white-space: pre-line;
}
```
**Unterschied zu `pre-wrap`:**
- `pre-wrap` bewahrt auch mehrere Leerzeichen
- `pre-line` bewahrt nur Zeilenumbrüche, aber nicht die exakte Anzahl von Leerzeichen
---
### `white-space: break-spaces`
Ein moderner Wert mit sehr speziellem Verhalten.
- Leerzeichen bleiben erhalten.
- Zeilenumbrüche bleiben erhalten.
- Umbruch kann auch an erhaltenen Leerzeichen stattfinden.
- Nachfolgende Leerzeichen am Zeilenende bleiben relevant.
```css
.output {
white-space: break-spaces;
}
```
Dieser Wert ist nützlich, wenn wirklich die **sichtbare Struktur von Leerzeichen** wichtig ist.
---
## Vergleichstabelle zu `white-space`
| Wert | Leerzeichen erhalten? | Zeilenumbrüche erhalten? | automatischer Umbruch? |
|---|---:|---:|---:|
| `normal` | Nein | Nein | Ja |
| `nowrap` | Nein | Nein | Nein |
| `pre` | Ja | Ja | Nein |
| `pre-wrap` | Ja | Ja | Ja |
| `pre-line` | Nein | Ja | Ja |
| `break-spaces` | Ja | Ja | Ja |
---
# Moderne Aufteilung: White-Space-Untereigenschaften
In neueren CSS-Spezifikationen wird `white-space` konzeptionell in feinere Teilaspekte aufgeteilt. Dazu gehören unter anderem:
1. `white-space-collapse`
2. `text-wrap-mode`
3. `white-space-trim`
Diese sind konzeptionell wichtig, aber **noch nicht überall gleich gut etabliert** wie `white-space`. In der Praxis verwendet man deshalb meist weiterhin `white-space`.
---
## `white-space-collapse`
Diese Eigenschaft steuert, wie Leerraum zusammengefasst oder erhalten wird.
Mögliche Werte sind je nach Spezifikation unter anderem:
- `collapse`
- `preserve`
- `preserve-breaks`
- `preserve-spaces`
- `break-spaces`
Beispielidee:
```css
.element {
white-space-collapse: preserve;
}
```
**Praxis-Hinweis:** Diese Eigenschaft ist interessant für moderne CSS-Modelle, aber für produktive, breit kompatible Websites ist `white-space` oft die sicherere Wahl.
---
## `text-wrap-mode`
Sie beschreibt grundsätzlich, ob Zeilenumbruch erlaubt ist.
Typische Werte:
- `wrap`
- `nowrap`
Beispiel:
```css
.element {
text-wrap-mode: nowrap;
}
```
Auch hier gilt: In der Praxis ist meist `white-space: nowrap;` der bekanntere und breiter eingesetzte Weg.
---
## `white-space-trim`
Diese Eigenschaft soll beeinflussen, ob bestimmte Whitespaces an Anfang oder Ende entfernt werden.
Beispielhaft konzeptionell:
```css
.element {
white-space-trim: discard-before;
}
```
Auch das ist eher ein fortgeschrittenes bzw. modernes Thema mit eingeschränkter Relevanz im Alltag.
---
# `overflow-wrap` – was passiert mit langen Wörtern?
`overflow-wrap` bestimmt, ob der Browser **lange Wörter oder Zeichenketten umbrechen darf**, wenn sie sonst den Container sprengen würden.
Früher war dafür oft `word-wrap` im Einsatz. Das ist heute im Grunde ein Alias für `overflow-wrap`.
## Syntax
```css
.element {
overflow-wrap: normal;
}
```
## Werte
### `overflow-wrap: normal`
Der Browser bricht nur an normalen Umbruchstellen um.
```css
.element {
overflow-wrap: normal;
}
```
Lange URLs oder zusammengesetzte Wörter können dann überlaufen.
---
### `overflow-wrap: break-word`
Falls nötig, darf ein langes Wort umgebrochen werden, um Overflow zu verhindern.
```css
.article {
overflow-wrap: break-word;
}
```
**Typischer Einsatz:**
- CMS-Inhalte
- Foren
- Kommentare
- UGC („user generated content“)
- lange URLs
---
### `overflow-wrap: anywhere`
Noch aggressiver: Der Browser darf an praktisch jeder Stelle umbrechen, wenn nötig.
```css
.article {
overflow-wrap: anywhere;
}
```
**Wann sinnvoll?**
- bei extrem langen Tokens
- bei technischen IDs
- bei URLs ohne sinnvolle Trennpunkte
- in sehr schmalen Layouts
**Unterschied zu `break-word`:**
`anywhere` erlaubt Umbrüche sehr frei und berücksichtigt diese Möglichkeiten auch stärker bei der Zeilenberechnung.
---
## `word-wrap` – historischer Alias
```css
.element {
word-wrap: break-word;
}
```
Das funktioniert oft noch, aber modern und sauber ist:
```css
.element {
overflow-wrap: break-word;
}
```
---
# `word-break` – wie aggressiv darf in Wörtern gebrochen werden?
`word-break` beeinflusst den Umbruch **innerhalb von Wörtern** stärker als `overflow-wrap`.
## Syntax
```css
.element {
word-break: normal;
}
```
## Werte
### `word-break: normal`
Normales Umbruchverhalten nach Sprach- und Schriftsystemregeln.
```css
.element {
word-break: normal;
}
```
---
### `word-break: break-all`
Wörter dürfen praktisch an beliebigen Stellen getrennt werden.
```css
.element {
word-break: break-all;
}
```
**Effekt:** Auch normale Wörter können mitten im Wort umbrechen.
Das löst Overflow-Probleme zuverlässig, sieht aber oft unschön aus.
**Einsatz nur mit Vorsicht**, z. B. bei:
- sehr schmalen technischen Layouts
- Tabellen mit langen Schlüsseln
- maschinenlesbaren Zeichenfolgen
---
### `word-break: keep-all`
Verhindert Wortumbrüche innerhalb von Wörtern, besonders relevant für ostasiatische Schriftsysteme.
```css
.element {
word-break: keep-all;
}
```
Für deutschsprachige Seiten ist dieser Wert seltener relevant, kann aber in internationalen Projekten wichtig sein.
---
## Unterschied zwischen `overflow-wrap` und `word-break`
Das ist einer der häufigsten Stolperpunkte.
### `overflow-wrap`
- greift vor allem dann, wenn ein Wort **sonst überlaufen würde**
- ist eher eine „Notfalllösung“
### `word-break`
- beeinflusst allgemeiner, **wie innerhalb von Wörtern getrennt werden darf**
- ist meist aggressiver
### Faustregel ✅
1. Erst `overflow-wrap` prüfen
2. Nur wenn das nicht reicht, `word-break` einsetzen
3. `break-all` nur bewusst und sparsam verwenden
---
# `hyphens` – automatische Silbentrennung
Mit `hyphens` kann der Browser Wörter an geeigneten Stellen trennen – oft mit Bindestrich.
## Syntax
```css
.element {
hyphens: auto;
}
```
## Werte
### `hyphens: none`
Keine Silbentrennung.
```css
.element {
hyphens: none;
}
```
---
### `hyphens: manual`
Nur manuell vorgegebene Trennstellen werden verwendet.
```css
.element {
hyphens: manual;
}
```
Manuelle Trennstellen können z. B. im HTML gesetzt werden.
---
### `hyphens: auto`
Automatische Silbentrennung nach Sprachregeln, sofern der Browser und die Spracheinstellungen das unterstützen.
```css
p {
hyphens: auto;
}
```
Wichtig ist dabei oft ein korrekt gesetztes `lang`-Attribut:
```html
```
oder
```html
Donaudampfschifffahrtsgesellschaftskapitän
```
Ohne passende Sprache kann automatische Silbentrennung unzuverlässig sein.
---
## Wann ist `hyphens` nützlich?
- schmale Textspalten
- Magazine-Layouts
- lange deutsche Wörter
- bessere Blocksatzdarstellung
## Beispiel
```css
.article-text {
hyphens: auto;
overflow-wrap: normal;
}
```
Das führt oft zu schöneren Ergebnissen als brutal mit `word-break: break-all` zu arbeiten.
---
# `line-break` – Regeln für Zeilenumbrüche, besonders in asiatischen Schriften
`line-break` steuert die Strenge der Umbruchregeln, insbesondere für chinesische, japanische und koreanische Texte.
## Syntax
```css
.element {
line-break: auto;
}
```
## Typische Werte
- `auto`
- `loose`
- `normal`
- `strict`
- `anywhere`
Beispiel:
```css
.element {
line-break: strict;
}
```
Für deutschsprachige Seiten ist diese Eigenschaft meist **nicht zentral**, aber in mehrsprachigen Projekten kann sie wichtig sein.
---
# `text-wrap` – moderne Steuerung für Zeilenumbruch
`text-wrap` ist eine modernere Eigenschaft für Strategien des Textumbruchs.
## Syntax
```css
.element {
text-wrap: wrap;
}
```
## Mögliche Werte
Je nach aktuellem Implementierungsstand sind insbesondere diese relevant:
- `wrap`
- `nowrap`
- `balance`
- `pretty`
- `stable`
Nicht jeder Wert wird in jedem Browser gleich unterstützt.
---
## `text-wrap: wrap`
Normales Umbruchverhalten.
```css
.element {
text-wrap: wrap;
}
```
---
## `text-wrap: nowrap`
Kein automatischer Umbruch.
```css
.element {
text-wrap: nowrap;
}
```
Praktisch ähnlich zu `white-space: nowrap`, aber konzeptionell moderner auf den Umbruch fokussiert.
---
## `text-wrap: balance`
Versucht, Zeilen ausgewogener zu verteilen. Besonders nützlich für Überschriften.
```css
h1, h2 {
text-wrap: balance;
}
```
**Sehr sinnvoll für:**
- Headlines
- Hero-Texte
- Card-Titel
Statt einer sehr langen und einer sehr kurzen Zeile versucht der Browser, ein harmonischeres Ergebnis zu erzeugen.
---
## `text-wrap: pretty`
Zielt auf optisch angenehmere Umbrüche ab und versucht unschöne Ein-Zeilen-Wörter oder ungünstige Brüche zu vermeiden.
```css
p {
text-wrap: pretty;
}
```
Die Unterstützung kann je nach Browserstand variieren.
---
## `text-wrap: stable`
Soll Umbruchverhalten stabil halten, z. B. bei bearbeitbaren Inhalten. Auch das ist eher ein fortgeschrittenes Thema.
---
# `tab-size` – Breite von Tabulatoren
Wenn ein Text Tab-Zeichen enthält, kann `tab-size` deren visuelle Breite bestimmen.
## Syntax
```css
.element {
tab-size: 4;
}
```
oder
```css
.element {
tab-size: 2;
}
```
## Beispiel
```css
pre {
white-space: pre;
tab-size: 4;
}
```
Das ist vor allem für Code, Logs oder vorformatierte Texte nützlich.
---
# Wichtige verwandte Eigenschaften
## `text-overflow`
Wenn Text nicht umbrochen wird und der Container zu klein ist, kann `text-overflow` festlegen, wie abgeschnittener Text dargestellt wird.
Typisch:
```css
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
Das erzeugt die bekannte Darstellung mit „…“.
**Wichtig:** `text-overflow` funktioniert typischerweise nur in Kombination mit:
1. begrenzter Breite
2. `overflow: hidden`
3. meist `white-space: nowrap`
---
## `overflow`
Wenn Text nicht in den Container passt, beeinflusst `overflow`, ob er sichtbar bleibt, abgeschnitten wird oder Scrollbars erscheinen.
```css
.box {
overflow: auto;
}
```
Mögliche Werte:
- `visible`
- `hidden`
- `clip`
- `scroll`
- `auto`
---
## `display` und Breite
Textumbruch hängt nicht nur von Text-Eigenschaften ab, sondern auch davon, **ob überhaupt eine begrenzte Breite existiert**.
Beispiel:
```css
.inline-label {
display: inline;
}
```
Ein rein inline dargestelltes Element verhält sich anders als ein Block mit fester oder maximaler Breite.
Oft braucht man für sichtbaren Umbruch:
```css
.card-title {
display: block;
max-width: 20rem;
}
```
---
# Typische Praxisrezepte 💡
## 1. Normaler Fließtext
```css
p {
white-space: normal;
overflow-wrap: break-word;
hyphens: auto;
}
```
**Gut für:** Artikel, Blogposts, CMS-Inhalte
**Vorteil:** normale Darstellung, aber robuste Behandlung langer Wörter.
---
## 2. Lange URLs oder unkontrollierter User-Content
```css
.user-content {
overflow-wrap: anywhere;
}
```
**Gut für:** Kommentare, Foren, Chat, Markdown-Content
---
## 3. Eine Zeile mit Auslassungspunkten
```css
.one-line-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
---
## 4. Vorformatierter Text oder Code
```css
pre {
white-space: pre;
tab-size: 4;
overflow: auto;
}
```
Wenn Code stattdessen umbrechen soll:
```css
pre.wrap {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
```
---
## 5. Benutzereingaben mit erhaltenen Zeilenumbrüchen
```css
.user-message {
white-space: pre-wrap;
overflow-wrap: break-word;
}
```
Das ist ein sehr typisches und sinnvolles Setup.
---
## 6. Schöne Überschriften umbrechen
```css
h1, h2, h3 {
text-wrap: balance;
}
```
Fallback-orientiert kann man einfach zusätzlich auf normales Verhalten vertrauen, falls der Browser den Wert nicht unterstützt.
---
# Häufige Stolperfallen
## 1. `nowrap` „funktioniert zu gut“
```css
.badge {
white-space: nowrap;
}
```
Dann bleibt wirklich alles in einer Zeile. Wenn der Container schmal ist, läuft der Text möglicherweise heraus.
**Lösung:** Nur dort einsetzen, wo es wirklich gewünscht ist.
---
## 2. `text-overflow: ellipsis` zeigt keine Punkte
Nur diese Regel reicht nicht:
```css
.element {
text-overflow: ellipsis;
}
```
Meist braucht man zusätzlich:
```css
.element {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
Und oft auch eine definierte Breite oder max. Breite.
---
## 3. Lange Wörter brechen trotzdem nicht um
Wenn ein langes Wort oder eine URL herausragt, hilft oft:
```css
.element {
overflow-wrap: break-word;
}
```
oder noch robuster:
```css
.element {
overflow-wrap: anywhere;
}
```
---
## 4. `hyphens: auto` bringt nichts
Dann fehlt oft eines der folgenden Dinge:
1. Das richtige `lang`-Attribut
2. Browser-Unterstützung
3. Geeigneter Fließtext-Kontext mit tatsächlichem Umbruchbedarf
---
## 5. In Flex- oder Grid-Layouts bricht Text nicht wie erwartet um
Das Problem liegt oft **nicht** an `white-space`, sondern an den Mindestgrößen der Items.
Ein klassischer Fall:
```css
.flex-item {
overflow-wrap: break-word;
}
```
Und trotzdem bricht der Text nicht schön um.
Dann kann zusätzlich nötig sein:
```css
.flex-item {
min-width: 0;
}
```
Oder in Grid-Layouts ebenfalls eine passende Größenlogik.
Das ist ein sehr häufiger Praxisfehler.
---
# Unterschiede kurz und prägnant zusammengefasst
## Wenn du Leerzeichen und Zeilenumbrüche aus dem Quelltext steuern willst
→ **`white-space`**
## Wenn lange Wörter oder URLs den Container sprengen
→ **`overflow-wrap`**
## Wenn innerhalb von Wörtern aggressiver getrennt werden soll
→ **`word-break`**
## Wenn automatische Silbentrennung gewünscht ist
→ **`hyphens`**
## Wenn Überschriften schöner umbrechen sollen
→ **`text-wrap: balance`**
## Wenn Tabs in vorformatiertem Text korrekt aussehen sollen
→ **`tab-size`**
---
# Empfehlenswerte Standardstrategien
## Für normalen Content
```css
.content {
white-space: normal;
overflow-wrap: break-word;
hyphens: auto;
}
```
---
## Für User-Generated Content
```css
.user-content {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
```
Das bewahrt Eingabe-Zeilenumbrüche und verhindert Layoutbruch durch lange Tokens.
---
## Für Titel
```css
.title {
text-wrap: balance;
}
```
---
## Für einzeilige UI-Elemente
```css
.chip {
white-space: nowrap;
}
```
---
## Für abgeschnittene Ein-Zeilen-Texte
```css
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
---
# Beispiel: alles in einer kleinen Demo
```html
Das ist ein normaler Fließtext mit einer sehrlangenbeispielzeichenketteohnesinnvollenumbruch.
Dies ist ein sehr langer Titel, der in einer Zeile abgeschnitten werden soll.
function test() {
\tconsole.log("Hallo");
}
```
```css
.demo {
max-width: 20rem;
font-family: system-ui, sans-serif;
}
.normal {
white-space: normal;
overflow-wrap: break-word;
hyphens: auto;
}
.message {
white-space: pre-wrap;
overflow-wrap: break-word;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.code {
white-space: pre;
tab-size: 4;
overflow: auto;
}
```
---
# Browser-Kompatibilität – was ist besonders sicher?
Sehr gut etabliert und in der Praxis „sicher“:
- `white-space`
- `overflow-wrap`
- `word-break`
- `hyphens` mit gewissen sprach- und browserabhängigen Unterschieden
- `tab-size`
- `text-overflow`
Moderner bzw. teils mit Vorsicht zu prüfen:
- `text-wrap` mit Werten wie `balance`, `pretty`, `stable`
- Untereigenschaften wie `white-space-collapse`, `text-wrap-mode`, `white-space-trim`
**Empfehlung:** Für produktive Projekte moderne Features gern nutzen, aber mit sinnvollen Fallbacks.
---
# Eine praktische Merkhilfe 🧠
Du kannst dir das so merken:
1. **`white-space`**
„Wie behandle ich Leerzeichen und Zeilenumbrüche grundsätzlich?“
2. **`overflow-wrap`**
„Was mache ich mit langen Wörtern, wenn sie sonst überlaufen?“
3. **`word-break`**
„Darf ich Wörter auch mitten drin zerlegen?“
4. **`hyphens`**
„Kann ich Wörter sprachgerecht trennen?“
5. **`text-wrap`**
„Welche Strategie soll der Browser für den Umbruch wählen?“
6. **`tab-size`**
„Wie breit sind Tabs in vorformatiertem Text?“
---
# Fazit
Die wichtigste Eigenschaft für White Space ist **`white-space`**. Sie legt die Basis dafür, wie Text, Leerzeichen und Zeilenumbrüche verarbeitet werden. Für robuste Layouts reicht das allein aber oft nicht aus.
In der Praxis ist diese Kombination besonders häufig sinnvoll:
```css
.element {
white-space: normal;
overflow-wrap: break-word;
hyphens: auto;
}
```
Für Benutzereingaben dagegen oft eher:
```css
.element {
white-space: pre-wrap;
overflow-wrap: break-word;
}
```
Und für moderne, schön umbrechende Überschriften:
```css
h1, h2 {
text-wrap: balance;
}
```
Wenn du möchtest, kann ich dir im nächsten Schritt noch eine **kompakte Cheat Sheet-Tabelle**, eine **Browser-Kompatibilitätsübersicht** oder eine **visuelle Demo mit HTML/CSS-Beispielen für jeden Wert** erstellen.