text-wrap
Baseline 2024
Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die text-wrap
CSS-Kurzschrift-Eigenschaft steuert, wie der Text innerhalb eines Elements umbrochen wird. Die verschiedenen Werte bieten:
- Typografische Verbesserungen, zum Beispiel ausgewogenere Zeilenlängen über gebrochene Überschriften hinweg
- Eine Möglichkeit, den Zeilenumbruch komplett auszuschalten.
Hinweis: Die white-space-collapse
und text-wrap
Eigenschaften können gemeinsam mit der white-space
Kurzschrift-Eigenschaft deklariert werden.
Probieren Sie es aus
Zusammenfassende Eigenschaften
Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:
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 aus der unten angegebenen Liste von Werten spezifiziert.
Werte
wrap
-
Text wird an geeigneten Zeichen umbrochen (z.B. Leerzeichen in Sprachen wie Englisch, die Leerzeichentrenner verwenden), um Überschreiten zu minimieren. Dies ist der Standardwert.
nowrap
-
Text wird nicht über Zeilen hinweg umbrochen. Er wird das enthaltene Element überlaufen, anstatt auf einer neuen Zeile zu brechen.
balance
-
Text wird so umbrochen, dass die Anzahl der Zeichen in jeder Zeile am besten ausbalanciert wird, was die Layoutqualität und Lesbarkeit erhöht. Da das Zählen von Zeichen und das Ausbalancieren ü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
, außer dass der Benutzeragent einen langsameren Algorithmus verwendet, der ein besseres Layout über die Geschwindigkeit stellt. Dies ist für den Fließtext gedacht, bei dem eine gute Typografie gegenüber der Leistung bevorzugt wird (z.B. wenn die Anzahl der Waisenzeilen minimiert werden soll). stable
-
Führt zu demselben 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 zwei Möglichkeiten, wie Text innerhalb eines Blockes von Inhalten, wie einem Absatz (<p>
) oder Überschriften (<h1>–<h6>), über Zeilen hinwegfließ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 den Browser anzuweisen, wie die weichen Zeilenumbrüche kontrolliert werden sollen.
Der Wert, den Sie für text-wrap
wählen, hängt davon ab, wie viele Textzeilen Sie formatieren möchten, ob der Text contenteditable
ist und ob Sie das Erscheinungsbild oder die Leistung priorisieren müssen.
Wenn der formatierte Inhalt auf eine kurze Anzahl von Zeilen beschränkt wird, wie z.B. Ü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 erhöht. Da Browser die Anzahl der Zeilen, die von dieser Eigenschaft betroffen sind, 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
eine negative Auswirkung 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 Wert stable
verbessert die Benutzererfahrung, wenn er auf Inhalte angewendet wird, die contenteditable
sind. Dieser Wert stellt sicher, dass, während der Benutzer den Text bearbeitet, die vorherigen Zeilen im bearbeiteten Bereich stabil bleiben.
Formale Definition
Initialer Wert | wrap |
---|---|
Anwendbar auf | text and block containers |
Vererbt | Ja |
Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
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 der Werte für 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 im Beispiel ist editierbar. Ändern Sie den Text, indem Sie lange Wörter hinzufügen, um zu sehen, wie die unterschiedlichen Zeilen- und Wortlängen das Umbruchverhalten beeinflussen.
Spezifikationen
Specification |
---|
CSS Text Module Level 4 # text-wrap |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
white-space
white-space-collapse
- CSS Textmodul
- CSS
text-wrap: balance
auf developer.chrome.com - CSS
text-wrap: pretty
auf developer.chrome.com