`text-wrap-mode` CSS property

Baseline 2024

Neu verfügbar

Seit October 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die text-wrap-mode CSS Eigenschaft steuert, ob der Text innerhalb eines Elements umbrochen wird. Die verschiedenen Werte bieten alternative Möglichkeiten, den Inhalt eines Blockelements umzubrechen. Sie kann auch mit der Kurzschreibweise text-wrap oder white-space gesetzt und zurückgesetzt werden.

Hinweis: Die Eigenschaften white-space-collapse und text-wrap-mode können gemeinsam mit der Kurzschreibweise white-space deklariert werden.

Hinweis: Der Name dieser Eigenschaft ist ein Platzhalter, bis die CSSWG einen besseren Namen findet.

Probieren Sie es aus

text-wrap-mode: wrap;

text-wrap-mode: nowrap;

<section class="default-example" id="default-example">
  <div class="whole-content-wrapper">
    <p>Edit the text in the box:</p>
    <div class="transition-all" id="example-element">
      <p contenteditable>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut
        cum eum id quos est.
      </p>
    </div>
  </div>
</section>

.whole-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#example-element {
  border: 1px solid #c5c5c5;
  width: 250px;
}

Syntax

css

/* Keyword values */
text-wrap-mode: wrap;
text-wrap-mode: nowrap;

/* Global values */
text-wrap-mode: inherit;
text-wrap-mode: initial;
text-wrap-mode: revert;
text-wrap-mode: revert-layer;
text-wrap-mode: unset;

Werte

Diese Eigenschaft gibt an, ob Zeilen bei ungezogenen weichen Umbrüchen umgebrochen werden können. Mögliche Werte:

wrap: Text wird bei geeigneten Zeichen (beispielsweise Leerzeichen in Sprachen wie Englisch, die Leerzeichentrennung verwenden) umgebrochen, um Überlauf zu minimieren. Dies ist der Standardwert.
nowrap: Text wird nicht über Zeilen umgebrochen. Er wird das enthaltene Element überlaufen, anstatt in eine neue Zeile zu brechen.

Formale Definition

Anfangswert	`wrap`
Anwendbar auf	text and block containers
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

text-wrap-mode = 
  wrap    |
  nowrap

Beispiele

Inhalt umbrechen

Die Standardeinstellung ist, den Inhalt umzubrechen, sodass die text-wrap-mode-Eigenschaft nicht notwendig ist. In diesem Beispiel wird der Inhalt in die nächste Zeile übergehen, damit er in das Kästchen passt. Die letzte Zeile ist länger als das umgebende Kästchen und läuft über.

HTML

html

<div class="box">CSS IS AWESOME</div>

CSS

css

.box {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: wrap;
}

Ergebnis

Inhalt nicht umbrechen

In diesem Beispiel wird der Inhalt nicht in die nächste Zeile übergehen, damit er in das Kästchen passt, da der Inhalt explizit angewiesen wurde, nicht mit text-wrap-mode: nowrap; umzubrechen. Der Inhalt ist länger als das umgebende Kästchen und läuft über.

HTML

html

<div class="box">CSS IS AWESOME</div>

CSS

css

.box {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: nowrap;
}