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 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 nicht präfixierte Microsoft-Erweiterung namens word-wrap und wurde von den meisten Browsern mit demselben Namen implementiert. Sie wurde seitdem in overflow-wrap umbenannt, wobei word-wrap ein Alias bleibt.
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 wird overflow-wrap nur einen Umbruch erzeugen, wenn ein ganzes Wort nicht auf einer eigenen Zeile platziert werden kann, ohne über den Rand hinauszugehen.
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 angegeben, das aus der unten stehenden Liste von Werten ausgewählt wird.
Werte
normal-
Zeilen dürfen nur an normalen Worttrennpunkten brechen (wie ein Leerzeichen zwischen zwei Wörtern).
anywhere-
Um Überlaufen zu verhindern, darf eine ansonsten untrennbare Zeichenkette — wie ein langes Wort oder eine URL — an jedem Punkt gebrochen werden, wenn es in der Zeile keine anderen akzeptablen Umbruchpunkte gibt. An der Umbruchstelle wird kein Trennzeichen eingefügt. Sanfte Umbruchmöglichkeiten, die durch den Wortumbruch eingeführt werden, werden bei der Berechnung intrinsischer Größen für den Minimalinhalt berücksichtigt.
break-word-
Entspricht dem Wert
anywhere, wobei normalerweise untrennbare Wörter an beliebigen Punkten gebrochen werden dürfen, wenn es keine anderen akzeptablen Umbruchpunkte in der Zeile gibt. Sanfte Umbruchmöglichkeiten, die durch den Wortumbruch eingeführt werden, werden jedoch NICHT bei der Berechnung intrinsischer Größen für den Minimalinhalt 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
| Spezifikation |
|---|
| CSS Text Module Level 3 # overflow-wrap-property |