overflow-wrap CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2018 browserübergreifend verfügbar.
Die overflow-wrap CSS-Eigenschaft wird auf Text angewendet und legt fest, ob der Browser Zeilenumbrüche in einem ansonsten untrennbaren String einfügen soll, um zu verhindern, dass der Text über seine Zeilenbox hinausläuft.
Hinweis:
Ursprünglich war die Eigenschaft eine nicht standardisierte und nicht präfixierte Microsoft-Erweiterung namens word-wrap, die von den meisten Browsern mit demselben Namen implementiert wurde. Seitdem wurde sie in overflow-wrap umbenannt, wobei word-wrap als Alias fungiert.
Probieren Sie es aus
overflow-wrap: normal;
overflow-wrap: anywhere;
overflow-wrap: break-word;
<section class="default-example" id="default-example">
<div class="example-container">
Most words are short & don't need to break. But
<strong class="transition-all" id="example-element"
>Antidisestablishmentarianism</strong
>
is long. The width is set to min-content, with a max-width of 11em.
</div>
</section>
.example-container {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
padding: 0.75em;
width: min-content;
max-width: 11em;
height: 200px;
}
Hinweis:
Im Gegensatz zu word-break erzeugt overflow-wrap nur dann einen Umbruch, wenn ein ganzes Wort nicht auf seiner eigenen Zeile platziert werden kann, ohne dass es überläuft.
Syntax
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;
Werte
Diese Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben:
normal-
Zeilen dürfen nur an normalen Worttrennungspunkten brechen (z. B. ein Leerzeichen zwischen zwei Wörtern).
anywhere-
Um Überlauf zu verhindern, kann ein ansonsten untrennbarer Zeichenfolgenbereich — wie ein langes Wort oder eine URL — an jedem Punkt gebrochen werden, wenn es keine sonst akzeptablen Umbruchpunkte in der Zeile gibt. An der Umbruchstelle wird kein Silbentrennungszeichen eingefügt. Weiche Umbruchmöglichkeiten, die durch den Wortumbruch eingeführt werden, werden bei der Berechnung der min-content intrinsischen Größen berücksichtigt.
break-word-
Entspricht dem Wert
anywhere, wobei normalerweise untrennbare Wörter an willkürlichen Punkten gebrochen werden dürfen, wenn es keine sonst akzeptablen Umbruchpunkte in der Zeile gibt, aber weiche Umbruchmöglichkeiten, die durch den Wortumbruch eingeführt werden, NICHT bei der Berechnung der min-content intrinsischen Größen berücksichtigt werden.
Formale Definition
| Anfangswert | normal |
|---|---|
| Anwendbar auf | Textelemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
overflow-wrap =
normal |
break-word |
anywhere
Beispiele
Vergleich von overflow-wrap, word-break und hyphens
Dieses Beispiel vergleicht die Ergebnisse von overflow-wrap, word-break und hyphens beim Aufteilen eines langen Wortes.
HTML
<p>
They say the fishing is excellent at Lake
<em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
I've never been there myself. (<code>normal</code>)
</p>
<p>
They say the fishing is excellent at Lake
<em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
They say the fishing is excellent at Lake
<em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
They say the fishing is excellent at Lake
<em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>word-break</code>)
</p>
<p>
They say the fishing is excellent at Lake
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
I've never been there myself. (<code>hyphens</code>, without
<code>lang</code> attribute)
</p>
<p lang="en">
They say the fishing is excellent at Lake
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
They say the fishing is excellent at Lake
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
I've never been there myself. (<code>hyphens</code>, German rules)
</p>
CSS
p {
width: 13em;
margin: 2px;
background: gold;
}
.ow-anywhere {
overflow-wrap: anywhere;
}
.ow-break-word {
overflow-wrap: break-word;
}
.word-break {
word-break: break-all;
}
.hyphens {
hyphens: auto;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Text Module Level 3 # overflow-wrap-property |