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 CSS Eigenschaft steuert, wie Leerraum innerhalb eines Elements zusammengefasst wird.

Hinweis: Die white-space-collapse und text-wrap-mode Eigenschaften können zusammen mit der white-space Kurzschreibweise deklariert werden.

Syntax

css

/* 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 festgelegt, das aus der Liste der unten aufgeführten Werte gewählt wird.

Werte

collapse

Leerraumsequenzen werden zusammengefasst.

preserve

Leerraumsequenzen und Zeichenfolgenumbrüche werden beibehalten.

preserve-breaks

Leerraumsequenzen werden zusammengefasst, während Zeichenfolgenumbrüche erhalten bleiben.

preserve-spaces

Leerraumsequenzen werden beibehalten, während Tabs und Zeichenfolgenumbrüche in Leerzeichen umgewandelt werden.

break-spaces

Das Verhalten ist identisch mit preserve, außer dass:

Jede beibehaltene Leerraumsequenz nimmt immer Platz ein, auch am Ende der Zeile.
Nach jedem beibehaltenen Leerzeichen-Zeichen besteht eine Zeilenumbruchmöglichkeit, auch zwischen Leerzeichen-Zeichen.
Beibehaltene Leerzeichen nehmen Platz ein und hängen nicht, wodurch sich die intrinsischen Größen des Boxenlayouts (min-content Größe und max-content Größe) ändern.

Hinweis: Zeichenfolgenumbrüche sind Zeichen wie Zeilenumbrüche, die den Text auf neue Zeilen brechen lassen.

Hinweis: Das CSS text Modul definiert einen discard Wert für die white-space-collapse Eigenschaft, um alle Leerzeichen im Element zu verwerfen, jedoch wird dies 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

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

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

Siehe auch

Kurzschreibweise für white-space-collapse und text-wrap-mode: Die white-space Eigenschaft.
CSS text Modul
Umgang mit Leerraum in CSS

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden