Umbruch und Überlauf

Text ist der einzige Inhalt, dessen Länge du beim Gestalten nicht kennst. Titel werden übersetzt und dabei länger, Nutzer tragen Dinge ein, die du nicht vorhergesehen hast, und irgendwo steht immer ein Dateiname ohne ein einziges Leerzeichen.

01 / 04Wie der Browser normalerweise umbricht

Standardmäßig bricht Text an Leerzeichen um. Mehrere Leerzeichen hintereinander werden zu einem, und ein Zeilenumbruch im Quelltext zählt ebenfalls nur als Leerzeichen.

white-space stellt das um.

<p class="normal">Normal:    mehrere    Leerzeichen werden zu einem, und ein Umbruch im Quelltext
zählt auch nur als Leerzeichen.</p>
<p class="nowrap">nowrap: bricht nie um, egal wie lang die Zeile wird und wie schmal der Kasten ist.</p>
<p class="pre-wrap">pre-wrap:    Leerzeichen    bleiben stehen, Umbrüche im Quelltext
ebenfalls, und zu lange Zeilen brechen trotzdem um.</p>

p {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  width: 260px;
  border: 1px solid #d4d4d8;
  padding: 8px;
  margin-bottom: 12px;
}

.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

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

• nowrap verbietet den Umbruch ganz. Nützlich für Dinge, die zusammengehören, etwa ein Datum, ein Preis oder eine Telefonnummer.
• pre behält Leerzeichen und Umbrüche so, wie sie im Quelltext stehen, und bricht nicht zusätzlich um. Das ist das Verhalten, das ein <pre>-Element von Haus aus hat.
• pre-wrap mischt beides. Leerzeichen und Umbrüche bleiben, zu lange Zeilen brechen trotzdem, und das will man bei Text, den jemand in ein Formular getippt hat.
• pre-line behält nur die Umbrüche und fasst Leerzeichen wie üblich zusammen.

02 / 04Das lange Wort

Ein einzelnes langes Wort passt in keine schmale Spalte. Von sich aus bricht der Browser Wörter nicht auf, er lässt sie einfach herauslaufen.

<p class="ohne">Quelle: Jahresabschlusspraesentation_Entwurfsfassung_final_v3.pdf</p>
<p class="mit">Quelle: Jahresabschlusspraesentation_Entwurfsfassung_final_v3.pdf</p>

p {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  width: 260px;
  border: 1px solid #d4d4d8;
  padding: 8px;
  margin-bottom: 12px;
}

/* Der Standard bricht nur an Leerzeichen. Ein langes
   Wort läuft deshalb aus dem Kasten heraus. Bewusst
   ein Dateiname und keine Adresse: an Schrägstrichen
   brechen Browser durchaus um, und dann zeigte das
   Beispiel gar keinen Überlauf. */
.ohne {
  overflow-wrap: normal;
}

/* anywhere darf mitten im Wort umbrechen, aber nur dann,
   wenn es sonst wirklich nicht passt. */
.mit {
  overflow-wrap: anywhere;
}

overflow-wrap: anywhere erlaubt den Umbruch mitten im Wort, aber nur als letzten Ausweg. Normale Wörter bleiben unangetastet.

Der Nachbar word-break: break-all klingt ähnlich, macht aber etwas anderes. Er erlaubt den Umbruch zwischen zwei beliebigen Buchstaben. Am Zeilenende bricht er deshalb oft mitten im Wort, auch wenn das Wort in der nächsten Zeile bequem Platz hätte. Das Ergebnis ist Fließtext, der aussieht wie durch den Reißwolf gedreht.

<p class="anywhere">Der Tipptrainer zählt Anschläge, Fehler und die Zeit zwischen zwei Tasten und zeigt am Ende jeder Runde, welche Finger am häufigsten danebenliegen.</p>
<p class="break-all">Der Tipptrainer zählt Anschläge, Fehler und die Zeit zwischen zwei Tasten und zeigt am Ende jeder Runde, welche Finger am häufigsten danebenliegen.</p>

p {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  width: 260px;
  border: 1px solid #d4d4d8;
  padding: 8px;
  margin-bottom: 12px;
}

.anywhere {
  overflow-wrap: anywhere;
}

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

Oben bricht der Text zwischen den Wörtern um. Unten bricht er mitten in Wörtern, obwohl die in der nächsten Zeile bequem Platz hätten. Für lateinische Schriften nehme ich fast immer overflow-wrap: anywhere.

Echte Silbentrennung macht hyphens: auto, aber nur, wenn am HTML ein lang-Attribut steht. Wie das aussieht, steht in der CSS-Referenz unter text-overflow und hyphens.

03 / 04Überschriften, die gut umbrechen

Zwei jüngere Werte lösen ein Problem, gegen das man früher von Hand geschützte Leerzeichen gesetzt hat.

text-wrap: balance verteilt eine Überschrift gleichmäßig auf ihre Zeilen, statt die letzte mit einem einzelnen Wort zu füllen. Es funktioniert bis zu einer Handvoll Zeilen und ist damit genau für Überschriften gedacht, nicht für Fließtext. Alle großen Browser können es seit Mai 2024.

text-wrap: pretty ist die Variante für längere Texte. Es verhindert vor allem die einsame letzte Zeile mit einem Wort darin. Firefox kennt es bisher nicht (Stand Oktober 2026) und bricht dort einfach um wie immer. Schaden kann es also nicht.

04 / 04Ellipsis braucht drei Zutaten

<p class="alle">Alle drei: dieser lange Titel endet mit drei Punkten</p>
<p class="ohne-nowrap">Ohne nowrap: dieser lange Titel bricht einfach um</p>
<p class="ohne-overflow">Ohne overflow: dieser lange Titel läuft heraus</p>

p {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  width: 260px;
  border: 1px solid #d4d4d8;
  padding: 8px;
  margin-bottom: 12px;
  text-overflow: ellipsis;
}

.alle {
  white-space: nowrap;
  overflow: hidden;
}

.ohne-nowrap {
  overflow: hidden;
}

.ohne-overflow {
  white-space: nowrap;
}

text-overflow: ellipsis schneidet zu langen Text ab und setzt drei Punkte ans Ende. Es funktioniert nur zusammen mit zwei anderen Angaben.

• white-space: nowrap, damit der Text überhaupt zu lang werden kann statt umzubrechen.
• overflow: hidden, damit es etwas zum Abschneiden gibt.

Fehlt eine der beiden, passiert schlicht nichts. Mit den drei Fragen aus Lektion 1.4 kommst du hier nicht weiter. Der Selektor trifft, die Deklaration ist gültig, keine andere Regel gewinnt, und trotzdem wirkt sie nicht. Wer die Bedingung nicht kennt, verdächtigt eine Viertelstunde lang text-overflow.

Im Inspector steckt dabei etwas, das man leicht übersieht. white-space steht nicht im Auskunftsstreifen und overflow nur dann, wenn es etwas anderes als visible ist. Die Maße stehen aber immer da. Der erste Absatz misst rund 278 × 37, der zweite rund 278 × 56, weil er umbricht und zwei Zeilen hoch ist. Der dritte misst wieder rund 278 × 37, obwohl sein Text sichtbar rechts heraussteht. Der Kasten bleibt, wie er ist, und der Inhalt hält sich nicht daran. Das heißt Überlauf. Für das Layout ringsum zählt der Kasten, nicht der Text.

Abgeschnittener Text ist allerdings nicht lesbar. In einer Tabellenspalte oder einer Kartenüberschrift ist das in Ordnung, solange der volle Text an anderer Stelle steht. Für Inhalte, die man wirklich braucht, ist Umbrechen die bessere Antwort.

In der Aufgabe stehen zwei zu lange Texte in einer schmalen Karte, und jeder braucht eine andere Antwort.