text-wrap-mode

Baseline 2024

Newly available

Since ⁨October 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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 mithilfe der Kurzschrift text-wrap oder der Kurzschrift white-space gesetzt und zurückgesetzt werden.

Hinweis: Die Eigenschaften white-space-collapse und text-wrap-mode können zusammen mithilfe der Kurzschrift-Eigenschaft white-space deklariert werden.

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

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 ungewollten weichen Umbruchmöglichkeiten umgebrochen werden können. Mögliche Werte:

wrap: Text wird bei geeigneten Zeichen (zum Beispiel Leerzeichen, in Sprachen wie Englisch, die Leerzeichen als Trennzeichen verwenden) über Zeilen hinweg umgebrochen, um Überlauf zu minimieren. Dies ist der Standardwert.
nowrap: Text wird nicht über Zeilen hinweg umgebrochen. Er wird das enthaltende Element überlaufen, anstatt auf einer neuen 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

Umbruch des Inhalts

Die Standardeinstellung ist, den Inhalt so umzubrechen, dass die text-wrap-mode Eigenschaft nicht notwendig ist. In diesem Beispiel wird der Inhalt zur nächsten Zeile übergehen, damit er in das Kästchen passt. Die letzte Zeile ist länger als das enthaltende Kästchen, daher gibt es einen Überlauf.

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

Kein Umbruch des Inhalts

In diesem Beispiel wird der Inhalt nicht zur nächsten Zeile übergehen, so dass er in das Kästchen passt, da der Inhalt explizit angewiesen wurde, nicht mit text-wrap-mode: nowrap; umgebrochen zu werden. Der Inhalt ist länger als das enthaltende Kästchen und überläuft daher.

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;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 4 # text-wrap-mode

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden