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 eine Adresse, die nirgends umbricht.

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: ein Datum, ein Preis, eine Telefonnummer.

pre behält Leerzeichen und Umbrüche genau 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 ist die praktische Mischung: Leerzeichen und Umbrüche bleiben, zu lange Zeilen brechen trotzdem. Genau 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, und der Browser bricht Wörter von sich aus nicht auf. Er lässt sie 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 und macht etwas anderes: er bricht jedes Wort an jeder Stelle, auch wenn genug Platz wäre. Das Ergebnis ist Fließtext, der aussieht wie durch den Reißwolf gedreht. Für lateinische Schriften ist overflow-wrap: anywhere fast immer die richtige Wahl.

Bleibt hyphens: auto für echte Silbentrennung. Das funktioniert, hat aber eine Bedingung, an der es meistens scheitert: das lang-Attribut muss am HTML stehen, sonst weiß der Browser nicht, nach welchen Regeln er trennen soll, und tut gar nichts.

03 / 04Überschriften, die gut umbrechen

Zwei jüngere Werte lösen ein Problem, das man vorher von Hand mit geschützten Leerzeichen bearbeitet 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.

text-wrap: pretty ist die Variante für längere Texte. Es verhindert vor allem die einsame letzte Zeile mit einem Wort darin.

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. Das ist der Fall aus Lektion 1.4 in Reinform: die Deklaration ist gültig, sie steht da, und sie wirkt nicht. Wer die Bedingung nicht kennt, verbringt eine Viertelstunde damit, text-overflow zu verdächtigen.

Der Inspector zeigt dabei etwas, das leicht zu übersehen ist. white-space und overflow stehen zwar nicht im Auskunftsstreifen, die Maße aber schon: Der erste Absatz misst 278 × 37, der zweite 278 × 56, weil er umbricht und zwei Zeilen hoch ist. Der dritte misst wieder 278 × 37, obwohl sein Text sichtbar rechts heraussteht. Genau das ist Überlauf: Die Box bleibt, wie sie ist, und der Inhalt hält sich nicht daran. Für das Layout ringsum zählt die Box, nicht der Text.

Und ein Wort zur Zurückhaltung: abgeschnittener Text ist nicht lesbar. In einer Tabellenspalte oder einer Kartenüberschrift ist das in Ordnung, weil der volle Text an anderer Stelle steht. Für Inhalte, die man wirklich braucht, ist Umbrechen die bessere Antwort.