white-space-collapse
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.
* Some parts of this feature may have varying levels of support.
Die white-space-collapse-Eigenschaft von CSS steuert, wie Leerraum innerhalb eines Elements zusammengefasst wird.
Hinweis:
Die Eigenschaften white-space-collapse und text-wrap-mode können zusammen mit der Kurzform-Eigenschaft white-space angegeben werden.
Syntax
/* Keyword values */
white-space-collapse: collapse;
white-space-collapse: preserve;
white-space-collapse: preserve-breaks;
white-space-collapse: preserve-spaces;
white-space-collapse: break-spaces;
/* Global values */
white-space-collapse: inherit;
white-space-collapse: initial;
white-space-collapse: revert;
white-space-collapse: revert-layer;
white-space-collapse: unset;
Die white-space-collapse-Eigenschaft wird als einzelnes Schlüsselwort, das aus der untenstehenden Liste ausgewählt wurde, angegeben.
Werte
collapse-
Leerraumsequenzen werden zusammengefasst.
preserve-
Leerraumsequenzen und Segmentumbruchzeichen bleiben erhalten.
preserve-breaks-
Leerraumsequenzen werden zusammengefasst, während Segmentumbruchzeichen erhalten bleiben.
preserve-spaces-
Leerraumsequenzen bleiben erhalten, während Tabs und Segmentumbruchzeichen in Leerzeichen umgewandelt werden.
break-spaces-
Das Verhalten ist identisch zu
preserve, außer dass:- Jede Sequenz von erhaltenem Leerraum immer Platz einnimmt, auch am Ende der Zeile.
- Eine Zeilenumbruchmöglichkeit nach jedem erhaltenen Leerraumzeichen besteht, auch zwischen Leerraumzeichen.
- Erhaltene Leerzeichen Platz einnehmen und nicht "hängen", wodurch sie die intrinsischen Größen des Rahmens (
min-content-Größe undmax-content-Größe) beeinflussen.
Hinweis: Segmentumbruchzeichen sind Zeichen wie Zeilenumbrüche, die dazu führen, dass Text auf neue Zeilen umbricht.
Hinweis:
Das CSS Textmodul definiert einen Wert discard für die white-space-collapse-Eigenschaft, um allen Leerraum im Element zu verwerfen. Dies wird jedoch in keinem Browser unterstützt.
Formale Definition
| Anfangswert | collapse |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
white-space-collapse =
collapse |
discard |
preserve |
preserve-breaks |
preserve-spaces |
break-spaces
Beispiele
HTML
<h2 class="collapse">Default behavior;
all whitespace is collapsed
in the heading .</h2>
<h2 class="preserve">In this case
all whitespace is preserved
in the heading .</h2>
<h2 class="preserve-breaks">In this case only
the line breaks are preserved
in the heading .</h2>
<h2 class="preserve-spaces">In this case only
the spaces are preserved
in the heading .</h2>
CSS
.collapse {
white-space-collapse: collapse;
}
.preserve {
white-space-collapse: preserve;
}
.preserve-breaks {
white-space-collapse: preserve-breaks;
}
.preserve-spaces {
white-space-collapse: preserve-spaces;
}
h2 {
font-size: 1.6rem;
font-family: monospace;
border-bottom: 1px dotted #cccccc;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Text Module Level 4 # white-space-collapsing |
Browser-Kompatibilität
Loading…
Siehe auch
- Kurzform für
white-space-collapseundtext-wrap-mode: Diewhite-space-Eigenschaft. - CSS Textmodul
- Umgang mit Leerraum in CSS