HTML Zeilenumbruch
Text umbrechen, ohne die Abstände festzuschreiben
br, Absätze, style-Attribut: drei Stellen, an denen Text stecken bleibt.
Umbruch-Labor
Der Inhalt entscheidet, wo eine Zeile endet
Breite ändert sich. Bedeutung bleibt. Vergleichen Sie dieselbe Textstelle im breiten und im schmalen Satzspiegel.
normaler TextflussBrowser wählt den UmbruchWir beraten Sie gern zu Reparatur und Ersatzteilen.
Wir beraten Sie gern zu Reparatur und Ersatzteilen.
<br>Umbruch gehört zum InhaltWerkstatt Trave
Hafenstraße 4
23552 Lübeck
Werkstatt Trave
Hafenstraße 4
23552 Lübeck
<wbr>Optionale Trennstellekundendienst
kundendienst
­Optionale SilbentrennungWirtschaftsförderungsgesellschaft
Wirtschaftsförderungsgesellschaft
Entscheidungsgraph
Welche Art von Grenze liegt vor?
Beginnen Sie bei der Bedeutung, nicht bei der gewünschten Pixelposition.
Hat die Grenze eine eigene Bedeutung?
Der Browser bricht nach verfügbarer Breite um.
<p> für den AbsatzAbstand entsteht über CSS, die Struktur über HTML.
<br> für die ZeileDie Zeilengrenze bleibt bei jeder Breite erhalten.
<wbr>, ­ oder CSS passend zum Inhalt.
Überlauf-Sprechstunde
Der schmale Rand ist der ehrlichere Test
Eine einzige lange Zeichenfolge kann die Seite breiter als den Bildschirm machen. Prüfen Sie deshalb nicht nur Fließtext, sondern auch URLs, Dateinamen und Kennungen.
bestellnummer-2026-09-08-ABCDEFGragt über 320 px hinausbestellnummer-2026-09-08-ABCDEFGbleibt im TextblockZwei belastbare Muster
Struktur setzen, Breite offenlassen
<p class="anschrift">
Werkstatt Trave<br>
Hafenstraße 4<br>
23552 Lübeck
</p>.fliesstext {
max-inline-size: 65ch;
line-height: 1.5;
hyphens: auto;
overflow-wrap: anywhere;
}Setzen Sie am Dokument zusätzlich die passende Sprache, zum Beispiel lang="de".
Aus dem Prüfbericht
Eine Regel, eine Stelle
Kritisch Feste Abstände im style-Attribut Regel avoid-inline-spacing
Zeichen- und Wortabstand mit !important lassen sich von Lesehilfen nicht erhöhen. Ohne !important und ohne feste Höhe darf der Absatz wachsen.
Zum Mitnehmen
Der Textblock, korrigiert
Sperren entfernen, Umbrüche dem Text überlassen.
Korrektur in 3 Schritten ansehen
Die Sperren im style-Attribut lösen
Das style-Attribut weicht einer Klasse. Ohne !important und ohne feste Höhe kann der Absatz bei größeren Abständen mitwachsen.
KorrekturvergleichSchritt 1 · HTML Vorher
<p style="line-height: 1 !important; letter-spacing: 0 !important; height: 2em !important; overflow: hidden !important;"> Öffnungszeiten Montag bis Freitag von 8 bis 17 Uhr. </p>Nachher
<p class="hinweis"> Öffnungszeiten Montag bis Freitag von 8 bis 17 Uhr. </p>Markierte Zeilen wurden geändert
So prüfen Sie es Vergrößern Sie die Schrift im Browser auf 200 Prozent. Der Text bleibt vollständig sichtbar.
Abstände überschreibbar setzen
Die Zeilenhöhe bleibt lesbar und bleibt änderbar. Ohne feste Höhe schneidet der Block keinen Text mehr ab.
KorrekturvergleichSchritt 2 · CSS Vorher
.hinweis { line-height: 1 !important; height: 2em !important; overflow: hidden !important; }Nachher
.hinweis { line-height: 1.5; height: auto; overflow: visible; }Markierte Zeilen wurden geändert
So prüfen Sie es Stellen Sie im Browser eine größere Zeilenhöhe ein. Der Absatz wird höher, statt Text zu verstecken.
Zeilenumbrüche dem Textfluss überlassen
In der Anschrift gehört der Umbruch zum Inhalt, im Fließtext nicht. Ein br mitten im Satz zerreißt ihn auf schmalen Bildschirmen.
KorrekturvergleichSchritt 3 · HTML Vorher
<p>Werkstatt Trave<br> Hafenstraße 4<br> 23552 Lübeck</p> <p>Wir beraten Sie gern<br> zu Reparatur und Ersatzteilen.</p>Nachher
<p>Werkstatt Trave<br> Hafenstraße 4<br> 23552 Lübeck</p> <p>Wir beraten Sie gern zu Reparatur und Ersatzteilen.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Verkleinern Sie das Fenster auf Handybreite. Der Satz bricht sauber um, die Anschrift bleibt zeilenweise.