CSS-Eigenschaft overflow-wrap

Die Eigenschaft overflow-wrap definiert, ob der Browser Zeilen innerhalb einer unzerbrechlichen Zeichenkette trennen kann, um ein Überlaufen von Inhalten zu verhindern.

Die Eigenschaft overflow-wrap hat drei Werte: normal, anywhere und break-word.

Der Name von overflow-wrap der Standardname für die Eigenschaft word-wrap.
Anfangswert normal
Gilt für Alle Elemente
Geerbt Ja
Animierbar Nein
Version CSS3
DOM Syntax object.style.overflowWrap = "normal";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      p {
      width: 200px;
      margin: 3px;
      background: #ccc;
      }
      .anywhere { 
      overflow-wrap: anywhere; 
      }
      .break-word {
      overflow-wrap: break-word;
      }
      .normal {
      overflow-wrap: normal;
      }
      .auto {
      overflow-wrap: auto;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-wrap</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>Seit 1500 Jahren ist Lorem Ipsum der 
     Standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> Text der Branche...
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>Seit 1500 Jahren ist Lorem Ipsum der 
     Standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> Text der Branche...
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>Seit 1500 Jahren ist Lorem Ipsum der 
     Standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> Text der Branche...
    </p>
    <h3>Overflow-wrap: auto</h3>
    <p>Seit 1500 Jahren ist Lorem Ipsum der 
     Standard <em class="auto">dummydummydummydummydummydummydummydummy</em> 
      Text der Branche...
    </p>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
normal Die Linien werden nur nach den normalen Regeln des Linienbruchs unterbrochen. Die Wörter brechen nicht, auch wenn der Container überläuft. Das ist der Standardwert dieser Eigenschaft.
anywhere Lange Wörter oder URLs werden zu irgendeinem Zeitpunkt brechen, wenn es keine sonst akzeptablen Haltepunkte in der Zeile gibt. Die Silbentrennung wird auch bei Verwendung der Bindestricheigenschaft nicht unterbrochen.
break-word Lange Wörter oder Zeichenketten, die nicht in ihren Container passen, brechen an einer beliebigen Stelle, um einen Zeilenumbruch zu erzwingen, aber Soft-Wrap-Möglichkeiten, die durch den Wortbruch eingeführt werden, werden bei der Berechnung von Eigengrößen mit geringem Inhalt nicht berücksichtigt.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

23.0+ 18.0+ 49.0+ 6.1+ 12.1+


Finden Sie das nützlich?

Ähnliche Artikel