text-wrap-mode
Baseline 2024Newly 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 zu umbrechen. Diese Eigenschaft kann auch mit der text-wrap
oder white-space
Kurzform gesetzt und zurückgesetzt werden.
Hinweis:
Die Eigenschaften white-space-collapse
und text-wrap-mode
können gemeinsam mit der white-space
Kurzform-Eigenschaft deklariert werden.
Hinweis: Der Name dieser Eigenschaft ist ein Platzhalter, da die CSSWG einen besseren Namen sucht.
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
/* 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 an nicht erzwungenen weichen Umbruchmöglichkeiten umbrechen dürfen. Mögliche Werte:
wrap
-
Der Text wird an geeigneten Zeichen (z. B. Leerzeichen, in Sprachen wie Englisch, die Leerzeichentrenner verwenden) umbrochen, um Überlauf zu minimieren. Dies ist der Standardwert.
nowrap
-
Der Text wird nicht über Zeilen umbrochen. Er wird das enthaltende Element überlaufen, anstatt in eine neue Zeile zu wechseln.
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
Inhalt umbrechen
Die Standardeinstellung ist, den Inhalt umzubrechen, sodass die text-wrap-mode
-Eigenschaft nicht notwendig ist. In diesem Beispiel fließt der Inhalt so über in die nächste Zeile, dass er in das Feld passt; die letzte Zeile ist länger als das enthaltende Feld und läuft über.
HTML
<div class="box">CSS IS AWESOME</div>
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
Inhalt nicht umbrechen
In diesem Beispiel wird der Inhalt nicht in die nächste Zeile umbrochen, sodass er in das Feld passt, da dem Inhalt ausdrücklich mitgeteilt wurde, nicht mit text-wrap-mode: nowrap;
umbrochen zu werden. Der Inhalt ist länger als das enthaltende Feld und läuft über.
HTML
<div class="box">CSS IS AWESOME</div>
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
BCD tables only load in the browser