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 October 2018.

Die overflow-wrap CSS Eigenschaft wird auf Text angewendet und legt fest, ob der Browser Zeilenumbrüche innerhalb eines ansonsten nicht trennbaren Strings einfügen soll, um zu verhindern, dass Text über seine Zeilenbox hinauslä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 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 &amp; 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: rgba(255, 0, 200, 0.2);
  border: 3px solid #663399;
  padding: 0.75em;
  width: min-content;
  max-width: 11em;
  height: 200px;
}

Hinweis: Im Gegensatz zu word-break erzeugt overflow-wrap nur dann einen Zeilenumbruch, wenn ein gesamtes Wort nicht ohne Überlauf in der eigenen Zeile platziert werden kann.

Syntax

css
/* 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 stehenden Wertliste angegeben.

Werte

normal

Zeilen dürfen nur an normalen Worttrennungspunkten brechen (wie einem Leerzeichen zwischen zwei Wörtern).

anywhere

Um Überlauf zu verhindern, kann ein ansonsten nicht trennbares Zeichenfolgen — wie ein langes Wort oder eine URL — an jedem Punkt gebrochen werden, wenn in der Zeile keine anderen akzeptablen Trennungspunkte vorhanden sind. An der Trennstelle wird kein Trennzeichen eingefügt. Weiche Umbruchmöglichkeiten, die durch die Worttrennung eingeführt werden, werden bei der Berechnung der Mindestinhalts-eigenen Größen berücksichtigt.

break-word

Identisch zum anywhere Wert, mit normalerweise untrennbaren Wörtern, die an beliebigen Punkten gebrochen werden dürfen, wenn in der Zeile keine anderen akzeptablen Trennungspunkte vorhanden sind, aber weiche Umbruchmöglichkeiten, die durch die Worttrennung eingeführt werden, werden NICHT bei der Berechnung der Mindestinhalts-eigenen Größen berücksichtigt.

Formale Definition

Anfangswertnormal
Anwendbar aufTextelemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

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

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

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

Siehe auch