Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Dieoverflow-wrapCSS 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 namensword-wrap und wurde von den meisten Browsern unter demselben Namen implementiert. Sie wurde seitdem inoverflow-wrap umbenannt, wobeiword-wrap ein Alias ist.
Probieren Sie es aus
overflow-wrap: normal;overflow-wrap: anywhere;overflow-wrap: break-word;<section> <div> Most words are short & don't need to break. But <strong >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 zuword-break erzeugtoverflow-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;Dieoverflow-wrap Eigenschaft wird als ein einzelnes Schlüsselwort aus der unten aufgeführten Liste von Werten angegeben.
Werte
normalZeilen können nur an normalen Wortumbruchspunkten (wie einem Leerzeichen zwischen zwei Wörtern) umbrochen werden.
anywhereUm Ü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-wordGleicht 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 vonoverflow-wrap,word-break undhyphens beim Aufbrechen eines langen Wortes.
HTML
<p> They say the fishing is excellent at Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself. (<code>normal</code>)</p><p> They say the fishing is excellent at Lake <em>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>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>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself. (<code>word-break</code>)</p><p> They say the fishing is excellent at Lake <em>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>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself. (<code>hyphens</code>, English rules)</p><p lang="de"> They say the fishing is excellent at Lake <em>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 |