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

Bestandteile

Diese Eigenschaft ist eine Kurzform 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 ein einzelnes Schlüsselwort aus der untenstehenden Liste von Werten angegeben.

Werte

wrap

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

nowrap

Text wird nicht über Zeilen umgebrochen. Er überläuft das enthaltene Element, anstatt auf eine neue Zeile zu brechen.

balance

Der Text wird so umbrochen, dass die Anzahl der Zeichen auf jeder Zeile bestmöglich ausgeglichen ist, was die Layoutqualität und Lesbarkeit verbessert. Da das Zählen von Zeichen und deren Ausbalancieren über mehrere Zeilen rechnerisch aufwendig ist, wird dieser Wert nur für Textblöcke mit einer begrenzten Anzahl von Zeilen (sechs oder weniger für Chromium und zehn oder weniger für Firefox) unterstützt.

pretty

Führt zum gleichen Verhalten wie wrap, außer dass der Benutzeragent einen langsameren Algorithmus verwendet, der ein besseres Layout über Geschwindigkeit bevorzugt. Dies ist für Fließtext gedacht, bei dem gute Typographie über Leistung bevorzugt wird (zum Beispiel, wenn die Anzahl der Waise auf ein Minimum beschränkt werden sollte).

stable

Führt zum gleichen Verhalten wie wrap, außer dass, wenn der Benutzer den Inhalt bearbeitet, die Zeilen, die vor den von ihm bearbeiteten Zeilen liegen, statisch bleiben, anstatt dass der gesamte Textblock neu umbrochen wird.

Beschreibung

Es gibt 2 Möglichkeiten, wie Text über Zeilen innerhalb eines Inhaltsblocks wie einem Absatz (<p>) oder Überschriften (<h1>–<h6>) fließen kann. Diese sind erzwungene Zeilenumbrüche, die vom Benutzer kontrolliert werden, und weiche Zeilenumbrüche, die vom Browser kontrolliert werden. Die text-wrap-Eigenschaft kann verwendet werden, um dem Browser zu signalisieren, wie er die weichen Zeilenumbrüche steuern soll.

Der von Ihnen gewählte Wert für text-wrap hängt von der Anzahl der Textzeilen ab, die Sie gestalten möchten, davon, ob der Text contenteditable ist, und davon, ob Sie Erscheinungsbild oder Leistung priorisieren müssen.

Wenn der gestaltete 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 auf jeder Zeile auszugleichen und die Layoutqualität sowie die Lesbarkeit zu verbessern. Da Browser die Anzahl der Zeilen begrenzen, die durch diese Eigenschaft beeinflusst werden, ist der Einfluss dieses Werts auf die Leistung vernachlässigbar.

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

Der stable-Wert verbessert die Benutzererfahrung, 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 stabil 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 von grundlegenden Textumbruch-Werten

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 im Beispiel ist editierbar. Ändern Sie den Text und fügen Sie lange Wörter hinzu, um zu sehen, wie die unterschiedlichen Zeilen- und Wortlängen den Umbruch beeinflussen.

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)