overflow-wrap
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Oktober 2018.
Die overflow-wrap-Eigenschaft von CSS wird auf Text angewendet und legt fest, ob der Browser Zeilenumbrüche innerhalb einer ansonsten untrennbaren Zeichenkette einfügen sollte, um zu verhindern, dass der Text seine Zeilenbox überläuft.
Hinweis:
Die Eigenschaft war ursprünglich eine nicht standardisierte und unveränderte Microsoft-Erweiterung namens word-wrap und wurde von den meisten Browsern unter demselben Namen implementiert. Sie wurde seitdem in overflow-wrap umbenannt, wobei word-wrap ein Alias ist.
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 ohne Überlauf in einer eigenen Zeile platziert werden kann.
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;
Die overflow-wrap-Eigenschaft wird als ein einzelnes Schlüsselwort aus der folgenden Liste von Werten angegeben.
Werte
normal-
Zeilen dürfen nur an normalen Worttrennpunkten brechen (wie z. B. einem Leerzeichen zwischen zwei Wörtern).
anywhere-
Um Überlauf zu verhindern, kann eine ansonsten ununterbrochene Zeichenfolge – wie ein langes Wort oder eine URL – an jedem Punkt gebrochen werden, wenn es in der Zeile keine sonst akzeptablen Trennpunkte gibt. Es wird kein Trennstrichzeichen an der Trennstelle eingefügt. Weiche Umbruchmöglichkeiten, die durch den Wortumbruch eingeführt werden, werden bei der Berechnung von Min-Content intrinsischen Größen berücksichtigt.
break-word-
Identisch mit dem
anywhere-Wert, bei dem normalerweise untrennbare Wörter an beliebigen Punkten gebrochen werden dürfen, wenn es in der Zeile keine sonst akzeptablen Trennpunkte gibt, aber weiche Umbruchmöglichkeiten, die durch den Wortumbruch eingeführt werden, werden NICHT bei der Berechnung von Min-Content intrinsischen Größen berücksichtigt.
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
| Specification |
|---|
| CSS Text Module Level 3 # overflow-wrap-property |
Browser-Kompatibilität
Loading…