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 Kurzschreibweise 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 einzelnes Schlüsselwort angegeben, das aus der unten aufgeführten Liste von Werten ausgewählt wird.

Werte

wrap

Text wird über Zeilen bei 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 umgebrochen. Er überläuft sein enthaltendes Element, anstatt in einer neuen Zeile zu brechen.

balance

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

pretty

Führt zum gleichen Verhalten wie wrap, außer dass der User Agent einen langsameren Algorithmus verwendet, der ein besseres Layout über Geschwindigkeit bevorzugt. Dies ist für Fließtexte vorgesehen, bei denen gute Typografie über Leistung priorisiert wird (zum Beispiel, wenn die Anzahl von Waise minimiert werden soll).

stable

Führt zum gleichen Verhalten wie wrap, mit dem Unterschied, dass beim Bearbeiten des Inhalts die Zeilen, die vor den bearbeiteten Zeilen stehen, statisch bleiben, anstatt dass der gesamte Textblock neu umbricht.

Beschreibung

Es gibt 2 Möglichkeiten, wie Text innerhalb eines Inhaltsblocks, wie einem Absatz (<p>) oder Überschriften (<h1>–<h6>), über Zeilen fließen kann. Dies 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 den Browser anzuweisen, wie die weichen Zeilenumbrüche zu kontrollieren sind.

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

Wenn der gestylte Inhalt auf eine kurze Anzahl von Zeilen beschränkt ist, wie Überschriften, Bildunterschriften und Blockzitate, kann text-wrap: balance hinzugefügt werden, um die Anzahl der Zeichen in jeder Zeile auszugleichen und die Layoutqualität und Lesbarkeit zu verbessern. Da Browser die Anzahl der vom Wert betroffenen Zeilen begrenzen, ist die Auswirkung auf die Leistung vernachlässigbar.

Für längere Textabschnitte kann text-wrap: pretty verwendet werden. Beachten Sie, dass pretty eine negative Auswirkung auf die Leistung hat und daher nur für längere Textblöcke verwendet werden sollte, 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

Grundlegender Vergleich von 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 bearbeitbar. Ändern Sie den Text, 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)