CSS word-break Eigenschaft
Die CSS-Eigenschaft word-break legt fest, wo Zeilen umgebrochen werden. Erfahren Sie mehr und probieren Sie Beispiele aus.
Die CSS-Eigenschaft word-break steuert, wie Wörter umgebrochen werden, wenn Text den Rand seines Containers erreicht. Sie legt fest, ob der Browser ein Wort zwischen Zeichen trennen darf, damit langer, nicht umbrechbarer Inhalt nicht überläuft.
Standardmäßig finden Zeilenumbrüche nur an „Soft-Wrap-Gelegenheiten" statt — Leerzeichen, Bindestriche und ähnliche Umbruchpunkte. Eine einzelne lange Zeichenfolge ohne Leerzeichen (eine URL, ein Hash, ein langer Bezeichner) wird überhaupt nicht umgebrochen und läuft aus ihrem Container heraus. Mit word-break: break-all teilt man dem Browser mit, dass er die Zeile an jedem Zeichen umbrechen darf, sodass der Text umgebrochen wird, anstatt herauszulaufen.
Dies ist besonders nützlich für:
- Lange URLs, Dateipfade oder E-Mail-Adressen in schmalen Spalten.
- Nutzergenerierte Inhalte, bei denen die Wortlänge nicht vorhersehbar ist.
- Gemischte CJK- (Chinesisch / Japanisch / Koreanisch) und lateinische Texte, bei denen das Umbruchverhalten zwischen Schriften unterschiedlich ist.
word-break ist eng verwandt mit overflow-wrap (früher word-wrap) und white-space. Der wesentliche Unterschied: overflow-wrap: anywhere bricht ein Wort nur dann um, wenn es andernfalls überlaufen würde, während word-break: break-all bei jeder Zeile aggressiv umbricht, selbst wenn ein normaler Umbruchpunkt verfügbar war. Greifen Sie für gewöhnliche Fälle wie „diese URL soll nicht überlaufen" zuerst zu overflow-wrap, und verwenden Sie word-break, wenn Sie explizit einen zeichenweisen Umbruch möchten.
Diese Eigenschaft gehört zu den CSS3-Eigenschaften.
| Ausgangswert | normal |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.wordBreak = "break-all"; |
Syntax
CSS word-break Werte
word-break: normal | break-all | keep-all | break-word | initial | inherit;Beispiel der word-break Eigenschaft:
CSS word-break Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
html,
body {
height: 100%;
}
body {
font-family: Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #8ebf42;
}
p {
word-break: break-all;
line-height: 1;
text-transform: uppercase;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #eee;
width: 1em;
}
</style>
</head>
<body>
<p>element</p>
</body>
</html>Ergebnis
Im obigen Beispiel ist das <p> nur 1em breit, sodass jeder Buchstabe in eine eigene Zeile umbricht — eine anschauliche Demonstration, wie break-all normale Umbruchpunkte ignoriert.
Beispiel der word-break Eigenschaft mit dem Wert "break-all":
CSS word-break break-all Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
font-size: 0.95em;
line-height: 1.5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 50px auto;
max-width: 700px;
}
.text {
padding: 20px;
background-color: #666;
color: white;
text-align: justify;
}
.break {
word-break: break-all;
}
strong {
background-color: #000;
}
</style>
</head>
<body>
<h2>Word-break property example</h2>
<div class="container">
<h3>Text breaks inside words</h3>
<p class="text break">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| normal | Verwendet die normalen Zeilenumbruchregeln. Dies ist der Standardwert dieser Eigenschaft. |
| break-all | Umbricht zwischen beliebigen zwei Zeichen, unabhängig vom Überlauf. Dies kann Text schwer lesbar machen. |
| keep-all | Wortumbrüche sollen für chinesischen/japanischen/koreanischen (CJK) Text nicht verwendet werden. Nicht-CJK-Text verhält sich wie bei normal. |
| break-word | Veraltet. Bricht Wörter an beliebigen Stellen um, wenn in der Zeile keine akzeptablen Umbruchpunkte vorhanden sind. Verwenden Sie stattdessen overflow-wrap: anywhere. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Tipps und häufige Fallstricke
break-allbeeinträchtigt die Lesbarkeit. Da es ein Wort an jedem beliebigen Zeichen trennen kann, wird normaler Fließtext schwer lesbar. Verwenden Sie es nur dort, wo der Inhalt kein Fließtext ist (Codes, Hashes, URLs) oder wo Sie wirklich jede Zeile bis zum Rand füllen möchten.- Bevorzugen Sie
overflow-wrapfür „einfach nicht überlaufen lassen". Wenn Ihr einziges Ziel darin besteht, zu verhindern, dass eine lange URL das Layout bricht, hältoverflow-wrap: break-wordnormale Wörter intakt und bricht nur das problematische Wort um. break-wordist veraltet. Derbreak-word-Wert vonword-breakist ein Überbleibsel und verhält sich wieoverflow-wrap: anywherekombiniert mitword-break: normal. Verwenden Sie ihn nicht in neuem Code — setzen Sie stattdessenoverflow-wrap: anywhere.keep-allist für CJK-Text. Es verhindert Umbrüche innerhalb chinesischer, japanischer und koreanischer Wörter. Lateinischer Text wird wie beinormalbehandelt, sodass es auf englische Inhalte keinen sichtbaren Einfluss hat.- Kombinieren Sie es mit
hyphensfür schöneren Fließtext. Wenn lange Wörter an sinnvollen Stellen mit einem Bindestrich umgebrochen werden sollen, kombinieren Sieoverflow-wrapmithyphens, anstattbreak-allzu erzwingen.
Browser-Unterstützung
word-break wird in allen modernen Browsern unterstützt. Die Werte normal, break-all und keep-all sind weitgehend verfügbar; der veraltete Wert break-word wird aus Gründen der Abwärtskompatibilität unterstützt, sollte jedoch vermieden werden.