text-wrap

Probieren Sie es aus

text-wrap: wrap;

text-wrap: nowrap;

text-wrap: balance;

text-wrap: pretty;

text-wrap: stable;

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

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:

• text-wrap-mode
• text-wrap-style

Syntax

/* Keyword values */
text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;
text-wrap: pretty;
text-wrap: stable;

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

Die text-wrap Eigenschaft wird als Schlüsselwort aus der folgenden Liste von Werten spezifiziert.

Werte

wrap

Text wird an geeigneten Zeichen (zum Beispiel Leerzeichen, in Sprachen wie Englisch, die Leerzeichen als Trennzeichen verwenden) umgebrochen, um Überlauf zu minimieren. Dies ist der Standardwert.

nowrap

Text wird nicht über Zeilen umbrochen. Er wird über sein enthaltendes Element hinausgehen, anstatt in eine neue Zeile zu brechen.

balance

Text wird so umbrochen, dass die Anzahl der Zeichen in jeder Zeile bestmöglich ausgeglichen wird, was die Layoutqualität und Lesbarkeit erhöht. Da das Zählen von Zeichen und deren Ausgleich über mehrere Zeilen hinweg rechnerisch aufwendig ist, wird dieser Wert nur für Textblöcke unterstützt, die eine begrenzte Anzahl von Zeilen umfassen (sechs oder weniger für Chromium und zehn oder weniger für Firefox).

pretty

Führt zu demselben Verhalten wie wrap, mit der Ausnahme, dass der Benutzeragent einen langsameren Algorithmus nutzt, der ein besseres Layout gegenüber der Geschwindigkeit bevorzugt. Dies ist für Fließtext gedacht, bei dem gute Typografie über der Leistung steht (zum Beispiel, wenn die Anzahl der Waisen minimiert werden soll).

stable

Führt zu demselben Verhalten wie wrap, außer wenn der Benutzer den Inhalt bearbeitet, bleiben die Zeilen, die den bearbeiteten Zeilen vorausgehen, unverändert, anstatt dass der gesamte Textblock neu umbrochen wird.

Beschreibung

Es gibt zwei Arten, wie Text innerhalb eines Inhaltsblocks, wie etwa eines Absatzes (<p>) oder Überschriften (<h1>–<h6>), über Zeilen fließen kann. Diese sind erzwungene Zeilenumbrüche, die vom Benutzer gesteuert werden, und weiche Zeilenumbrüche, die vom Browser gesteuert werden. Die text-wrap Eigenschaft kann verwendet werden, um den Browser zu beeinflussen, wie er die weichen Zeilenumbrüche steuert.

Der gewählte Wert für text-wrap hängt davon ab, wie viele Zeilen Text Sie gestalten möchten, ob der Text contenteditable ist und ob Aussehen oder Leistung priorisiert werden müssen.

Wenn der gestylte Inhalt auf eine kurze Anzahl von Zeilen beschränkt wird, wie Überschriften, Bildunterschriften und Blockzitate, kann text-wrap: balance hinzugefügt werden, um die Anzahl der Zeichen in jeder Zeile auszugleichen, was die Layoutqualität und Lesbarkeit verbessert. Da Browser die Anzahl der von dieser Eigenschaft betroffenen Zeilen begrenzen, ist der Einfluss dieses Wertes auf die Leistung vernachlässigbar.

Für längere Textabschnitte kann text-wrap: pretty verwendet werden. Beachten Sie, dass pretty negative Auswirkungen auf die Leistung hat, daher sollte es nur für längere Textblöcke verwendet werden, wenn das Layout wichtiger ist als die Geschwindigkeit.

Der stable Wert verbessert das Benutzererlebnis, wenn er auf Inhalte angewendet wird, die contenteditable sind. Dieser Wert stellt sicher, dass, während der Benutzer Text bearbeitet, die vorherigen Zeilen im bearbeiteten Bereich unverändert bleiben.

Formale Definition

Formale Syntax

text-wrap = 
  <'text-wrap-mode'>   ||
  <'text-wrap-style'>  

<text-wrap-mode> = 
  wrap    |
  nowrap  

<text-wrap-style> = 
  auto           |
  balance        |
  stable         |
  pretty         |
  avoid-orphans  

Beispiele

Vergleich der grundlegenden Werte für den Textumbruch

HTML

<h2 class="wrap" contenteditable="true">
  The default behavior; the text in the heading wraps "normally"
</h2>

<h2 class="nowrap" contenteditable="true">
  In this case the text in the heading doesn't wrap, and overflows the container
</h2>

<h2 class="balance" contenteditable="true">
  In this case the text in the heading is nicely balanced across lines
</h2>

CSS

.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

.balance {
  text-wrap: balance;
}

h2 {
  font-size: 2rem;
  font-family: sans-serif;
}

Ergebnis

Der Text in dem Beispiel ist bearbeitbar. Ändern Sie den Text, indem Sie lange Wörter hinzufügen, um zu sehen, wie sich die unterschiedlichen Zeilen- und Wortlängen auf den Umbruch auswirken.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• white-space
• white-space-collapse
• CSS Textmodul
• CSS text-wrap: balance auf developer.chrome.com (2023)
• CSS text-wrap: pretty auf developer.chrome.com (2023)
• Balancing Japanese and Korean typography von Kelly Choyce-Dwan (2025)