white-space-collapse CSS property
Baseline
2024
*
Neu verfügbar
Seit March 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die white-space-collapse-CSS-Eigenschaft steuert, wie Leerraum innerhalb eines Elements zusammengestrichen wird.
Hinweis:
Die Eigenschaften white-space-collapse und text-wrap-mode können zusammen unter Verwendung der white-space Kurzschreibweise deklariert 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 ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.
Werte
collapse-
Leerraumsequenzen werden zusammengestrichen.
preserve-
Leerraumsequenzen und Segmentsumbruchzeichen bleiben erhalten.
preserve-breaks-
Leerraumsequenzen werden zusammengestrichen, während Segmentsumbruchzeichen erhalten bleiben.
preserve-spaces-
Leerraumsequenzen bleiben erhalten, während Tabs und Segmentsumbruchzeichen in Leerzeichen umgewandelt werden.
break-spaces-
Das Verhalten entspricht
preserve, mit den folgenden Ausnahmen:- Jede Sequenz von erhaltenem Leerraum nimmt immer Platz ein, auch am Ende der Zeile.
- Eine Zeilenbruchmöglichkeit besteht nach jedem erhaltenen Leerzeichen, auch zwischen Leerzeichen.
- Erhaltene Leerzeichen nehmen Platz ein und hängen nicht, was sich auf die intrinsischen Größen der Box auswirkt (
min-contentGröße undmax-contentGröße).
Hinweis: Segmentsumbruchzeichen sind Zeichen wie Zeilenumbrüche, die Text auf neue Zeilen umbrechen lassen.
Hinweis:
Das CSS-Text-Modul definiert einen discard-Wert für die white-space-collapse-Eigenschaft, um allen Leerraum im Element zu verwerfen, 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
| Spezifikation |
|---|
| CSS Text Module Level 4 # white-space-collapsing |
Browser-Kompatibilität
Siehe auch
- Kurzform für
white-space-collapseundtext-wrap-mode: Diewhite-space-Eigenschaft. - CSS-Textmodul
- Umgang mit Leerraum in CSS