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 CSS Eigenschaft gilt für Text und legt fest, ob der Browser Zeilenumbrüche innerhalb eines ansonsten untrennbaren Strings einfügen soll, um zu verhindern, dass der Text seine Zeilenbox überläuft.
Hinweis:
Die Eigenschaft war ursprünglich eine nicht standardisierte und unpräfixierte 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 unten aufgeführten Liste von Werten angegeben.
Werte
normal-
Zeilen können nur an normalen Wortumbruchspunkten (wie einem Leerzeichen zwischen zwei Wörtern) umbrochen werden.
anywhere-
Um Überlauf zu verhindern, kann eine ansonsten untrennbare Zeichenkette — wie ein langes Wort oder eine URL — an jedem Punkt umbrochen werden, wenn es in der Zeile keine anderen akzeptablen Umbruchspunkte gibt. An der Umbruchstelle wird kein Trennzeichen 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-
Gleicht dem Wert
anywhere, wobei normalerweise untrennbare Wörter an beliebigen Punkten umbrochen werden dürfen, wenn es in der Zeile keine anderen akzeptablen Umbruchspunkte gibt, aber weiche Umbruchmöglichkeiten, die durch den Wortumbruch eingeführt werden, werden NICHT bei der Berechnung der 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 Aufbrechen 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 |