Zeilenumbruch

Text bei einer bestimmten Spaltenbreite mit Wort- oder Zeichengrenzen umbrechen

Was ist das und wie funktioniert es?

Wortumbruch kontrolliert, wie Text über Zeilen verteilt wird, wenn er die verfügbare Breite überschreitet. Die CSS-Eigenschaft `word-wrap` (standardisiert als `overflow-wrap`) und `word-break` haben überlappende aber unterschiedliche Verhaltensweisen. `overflow-wrap: break-word` erlaubt Umbrüche nur wenn das Wort selbst nicht passt. `word-break: break-all` bricht an beliebigen Zeichengrenzen.

Dieses Tool generiert das richtige CSS für Wortumbruchanforderungen und zeigt visuelle Vorschauen verschiedener Eigenschaftskombinationen.

Anwendungsfälle

• Lange URL in Text: Eine URL wie "https://example.com/sehr/langer/pfad/dokument.pdf" in einem Absatz benötigt `overflow-wrap: break-word` zur Verhinderung von Überlauf auf schmalen Bildschirmen.
• Benutzergenerierter Inhalt: Eine Chat-Box, in die Benutzer lange Zeichenketten ohne Leerzeichen einfügen könnten, benötigt `word-break: break-all`.
• CJK-Text: Japanischer oder chinesischer Text mit `word-break: keep-all` bewahrt Worteinheiten.

Häufige Fragen

Was ist der Unterschied zwischen `word-wrap` und `overflow-wrap`?

`overflow-wrap` ist der offizielle CSS-Eigenschaftsname; `word-wrap` ist der ursprüngliche nicht-standardmäßige Name. Sie sind Aliase. Moderner Code sollte `overflow-wrap` verwenden.

Was ist der Unterschied zwischen `word-break: break-all` und `overflow-wrap: break-word`?

`break-word` bricht nur, wenn das gesamte Wort nicht in eine Zeile passt. `break-all` bricht an jeder Zeichenposition. Für die meisten Inhalte wird `overflow-wrap: break-word` bevorzugt.

Wie funktionieren CSS-Silbentrennungseigenschaften?

`hyphens: auto` erfordert ein `lang`-Attribut am HTML-Element. `hyphens: manual` trennt nur dort, wo `&shy;` oder `<wbr>` im HTML gesetzt wurden.

Was ist die `white-space`-Eigenschaft?

`white-space: nowrap` verhindert alle Zeilenumbrüche. `white-space: pre` bewahrt alle Leerzeichen. `white-space: pre-wrap` bewahrt Leerzeichen, bricht aber bei Überlauf um.

Dienstprogramme

Passwort-Generator · QR-Code-Generator · Stoppuhr · Countdown-Timer · Rechner · Zufallszahlen-Generator