CSS overflow-wrap-Eigenschaft

Die overflow-wrap-Eigenschaft wird verwendet, um festzulegen, ob der Browser Zeilenumbrüche innerhalb einer nicht umbrechbaren Zeichenkette durchführen kann, um so ein Überlaufen des Inhalts zu verhindern.

Die overflow-wrap-Eigenschaft hat drei Hauptwerte: normal, break-word und anywhere. Sie unterstützt auch die universellen CSS-Schlüsselwörter initial und inherit.

INFO

Der Name overflow-wrap gilt als der Standardname für die word-wrap-Eigenschaft.

Overflow-wrap vs. Word-break

Obwohl sich overflow-wrap und word-break ähnlich verhalten, gibt es Unterschiede zwischen ihnen. Die overflow-wrap-Eigenschaft bricht ein Wort, wenn es nicht ohne Überlaufen in die Zeile passt, unabhängig von der verwendeten Sprache. Die word-break-Eigenschaft wird hauptsächlich für CJK-Sprachen (Chinesisch, Japanisch und Koreanisch) verwendet, um anzugeben, wo Zeilenumbrüche zwischen Zeichen erfolgen können, bietet aber auch starke Brechregeln für Nicht-CJK-Texte.

Die Eigenschaften word-wrap und overflow-wrap

Die word-wrap-Eigenschaft akzeptiert die gleichen Werte wie overflow-wrap. Diese Eigenschaften verhalten sich ähnlich.

Initial Value	normal
Applies to	Alle Elemente.
Inherited	Ja.
Animatable	Nein.
Version	CSS3
DOM Syntax	object.style.overflowWrap = "normal";

Syntax

CSS overflow-wrap-Syntax

css

overflow-wrap: normal | anywhere | break-word | initial | inherit;

Beispiel für die overflow-wrap-Eigenschaft:

CSS overflow-wrap-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 200px;
        margin: 3px;
        background: #ccc;
      }
      .anywhere {
        overflow-wrap: anywhere;
      }
      .break-word {
        overflow-wrap: break-word;
      }
      .normal {
        overflow-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-wrap property example</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
  </body>
</html>

Try it Yourself »

Werte

Value	Description
normal	Zeilenumbrüche erfolgen nur gemäß den normalen Zeilenumbruchregeln. Wörter werden nicht umbrochen, selbst wenn sie den Container überlaufen. Dies ist der Standardwert dieser Eigenschaft.
anywhere	Lange Wörter oder URLs werden an beliebiger Stelle umbrochen, wenn es in der Zeile keine anderweitig akzeptablen Umbruchstellen gibt. Bindestriche gelten nicht als akzeptable Umbruchstellen, selbst wenn die Eigenschaft `hyphens` festgelegt ist.
break-word	Lange Wörter oder Zeichenketten, die nicht in ihren Container passen, werden an einer beliebigen Stelle umbrochen, um einen Zeilenumbruch zu erzwingen. Weiche Umbruchmöglichkeiten werden bei der Berechnung der minimalen Inhaltsgröße des Elements nicht berücksichtigt.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Welche Funktion hat die CSS-Eigenschaft 'overflow-wrap'?

Sie bestimmt, wie überlaufender, nicht sichtbarer Inhalt dem Benutzer signalisiert wirdSie legt fest, ob der Browser Zeilenumbrüche innerhalb von Wörtern durchführen soll, um Überlauf zu verhindernSie steuert das Verhalten der Eigenschaft 'break-inside'Sie definiert, wie zusätzlicher Inhalt behandelt wird, der in entgegengesetzter Richtung zur Schreibrichtung verläuftSie legt fest, wo ein Seiten- oder Spaltenumbruch erfolgen soll

CSS overflow-wrap-Eigenschaft ​

Overflow-wrap vs. Word-break ​

Die Eigenschaften word-wrap und overflow-wrap ​

Syntax ​

Beispiel für die overflow-wrap-Eigenschaft: ​

Werte ​