white-space

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die white-space CSS-Eigenschaft legt fest, wie Leerraum innerhalb eines Elements behandelt wird.

Probieren Sie es aus

Diese Eigenschaft legt zwei Dinge fest:

Ob und wie Leerraum kollabiert.
Ob und wie Zeilen umbrochen werden.

Hinweis: Um Wörter innerhalb ihrer selbst zu trennen, verwenden Sie stattdessen overflow-wrap, word-break, oder hyphens.

Syntax

css

/* Single keyword values */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* white-space-collapse and text-wrap-mode shorthand values */
white-space: wrap;
white-space: collapse;
white-space: preserve nowrap;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

Die Werte der white-space-Eigenschaft können als ein einzelnes Schlüsselwort aus der unten stehenden Liste oder als zwei Werte angegeben werden, die Kurzformen für die white-space-collapse- und text-wrap-mode-Eigenschaften darstellen.

normal: Folgen von Leerzeichen werden kollabiert. Neue Zeilenzeichen im Quelltext werden genauso wie andere Leerzeichen behandelt. Zeilen werden nach Bedarf umbrochen, um Zeilenboxen zu füllen.
pre: Folgen von Leerzeichen bleiben erhalten. Zeilen werden nur an neuen Zeilenzeichen im Quelltext und an <br>-Elementen umbrochen.
pre-wrap: Folgen von Leerzeichen bleiben erhalten. Zeilen werden an neuen Zeilenzeichen, an <br> und nach Bedarf umbrochen, um Zeilenboxen zu füllen.
pre-line: Folgen von Leerzeichen werden kollabiert. Zeilen werden an neuen Zeilenzeichen, an <br> und nach Bedarf umbrochen, um Zeilenboxen zu füllen.

Die folgende Tabelle fasst das Verhalten der verschiedenen white-space-Schlüsselwortwerte zusammen:

	Neue Zeilen	Leerzeichen und Tabs	Textumbruch	Ende-der-Zeile-Leerzeichen	Andere Leerzeichentrenner am Zeilenende
`normal`	Kollabieren	Kollabieren	Umbruch	Entfernen	Hängen
`pre`	Beibehalten	Beibehalten	Kein Umbruch	Beibehalten	Kein Umbruch
`pre-wrap`	Beibehalten	Beibehalten	Umbruch	Hängen	Hängen
`pre-line`	Beibehalten	Kollabieren	Umbruch	Entfernen	Hängen

Ein Tabulator entspricht standardmäßig 8 Leerzeichen und kann mit der tab-size-Eigenschaft konfiguriert werden. Bei den Werten normal, nowrap und pre-line wird jeder Tabulator in ein Leerzeichen (U+0020) umgewandelt.

Hinweis: Es wird zwischen Leerzeichen und anderen Leerzeichentrennern unterschieden. Diese werden wie folgt definiert:

Leerzeichen: Leerzeichen (U+0020), Tabs (U+0009) und Segmentumbrüche (wie neue Zeilen).
andere Leerzeichentrenner: Alle anderen in Unicode definierten Leerzeichentrenner, außer denen, die bereits als Leerzeichen definiert sind.

Wo Leerraum gesagt wird zu hängen, kann dies die Größe der Box beeinflussen, wenn diese für intrinsische Größenmessung gemessen wird.

Kollabieren von Leerraum

Die white-space-collapse-Eigenschaftsseite erklärt den Browser-Algorithmus zum Kollabieren von Leerraum.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

white-space = 
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line

Beispiele

Grundlegendes Beispiel

css

code {
  white-space: pre;
}

Zeilenumbrüche innerhalb von <pre>-Elementen

css

pre {
  white-space: pre-wrap;
}

In Aktion

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

.box {
  width: 350px;
  padding: 16px;
}

#css-code {
  background-color: rgb(220 220 220);
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
  width: 100px;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}

const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.style.setProperty("white-space", e.target.value);
});

Steuerung des Zeilenumbruchs in Tabellen

HTML

html

<table>
  <tr>
    <td></td>
    <td>Very long content that splits</td>
    <td class="nw">Very long content that don't split</td>
  </tr>
  <tr>
    <td class="nw">white-space:</td>
    <td>normal</td>
    <td>nowrap</td>
  </tr>
</table>

CSS

css

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

Ergebnis

Mehrere Zeilen im SVG-Text-Element

Die white-space CSS-Eigenschaft kann verwendet werden, um mehrere Zeilen in einem <text>-Element zu erstellen, das standardmäßig nicht umbrecht.

HTML

Der Text innerhalb des <text>-Elements muss in mehrere Zeilen aufgeteilt werden, damit die neuen Zeilen erkannt werden. Nach der ersten Zeile müssen die Leerzeichen entfernt werden.

html

<svg viewBox="0 0 320 150">
  <text y="20" x="10">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>

CSS

css

text {
  white-space: break-spaces;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 4 # white-space-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Eigenschaften, die definieren, wie Wörter innerhalb ihrer selbst getrennt werden: overflow-wrap, word-break, hyphens
tab-size