Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

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 Juli 2015.

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

Diewhite-spaceCSS-Eigenschaft legt fest, wieLeerraum innerhalb eines Elements behandelt wird.

Probieren Sie es aus

white-space: normal;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: wrap;

white-space: collapse;

white-space: preserve nowrap;

<section>  <div>    <p>      But ere she from the church-door stepped She smiled and told us why: 'It      was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and      smiled, and passed it off Ere from the door she stept—    </p>  </div></section>

#example-element {  width: 16rem;}#example-element p {  border: 1px solid #c5c5c5;  padding: 0.75rem;  text-align: left;}

Die Eigenschaft spezifiziert zwei Dinge:

Ob und wie Leerraumzusammengefasst wird.
Ob und wie Zeilen umbrochen werden.

Hinweis:Um Wörterinnerhalb eines Wortes zu trennen, verwenden Sie stattdessenoverflow-wrap,word-break oderhyphens.

Bestanteilende Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Hinweis:Die Spezifikation definiert eine dritte Bestandteil-Eigenschaft:white-space-trim, welche noch in keinem Browser implementiert ist.

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: nowrap;white-space: wrap;white-space: break-spaces;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 derwhite-space-Eigenschaft können als ein oder zwei Schlüsselwörter angegeben werden, die die Werte für die Eigenschaftenwhite-space-collapse undtext-wrap-mode repräsentieren, oder die folgenden speziellen Schlüsselwörter:

normal: Sequenzen von Leerraum werdenzusammengefasst. Zeilenumbruchzeichen im Quelltext werden wie andere Leerzeichen behandelt. Zeilen werden bei Bedarf umgebrochen, um Zeilenboxen zu füllen. Entsprichtcollapse wrap.
pre: Sequenzen von Leerraum werden beibehalten. Zeilen werden nur an Zeilenumbruchzeichen im Quelltext und bei<br>-Elementen umbrochen. Entsprichtpreserve nowrap.
pre-wrap: Sequenzen von Leerraum werden beibehalten. Zeilen werden an Zeilenumbruchzeichen, bei<br> und bei Bedarf, um Zeilenboxen zu füllen, umbrochen. Entsprichtpreserve wrap.
pre-line: Sequenzen von Leerraum werdenzusammengefasst. Zeilen werden an Zeilenumbruchzeichen, bei<br> und bei Bedarf, um Zeilenboxen zu füllen, umbrochen. Entsprichtpreserve-breaks wrap.

Hinweis:Diewhite-space-Eigenschaft als Kurzform ist eine relativ neue Funktion (sieheBrowser-Kompatibilität). Ursprünglich hatte sie sechs Schlüsselwortwerte; nun wird der Wertnowrap stattdessen als Wert fürtext-wrap-mode interpretiert, während der Wertbreak-spaces als Wert fürwhite-space-collapse interpretiert wird. Die oben genannten vier Schlüsselwörter sind immer noch spezifisch fürwhite-space, haben jedoch Langform-Äquivalente. Die Änderung,white-space zu einer Kurzform zu machen, erweitert die akzeptablen Werte auf noch mehr Schlüsselwörter und Kombinationen, wiewrap undcollapse.

Die folgende Tabelle fasst das Verhalten dieser vierwhite-space-Schlüsselwortwerte zusammen:

	Neue Zeilen	Leerzeichen und Tabulatoren	Textumbruch	Leerzeichen am Zeilenende	Andere Leerraum-Trennzeichen am Zeilenende
`normal`	Zusammenfassen	Zusammenfassen	Umbruch	Entfernen	Hängen
`pre`	Beibehalten	Beibehalten	Kein Umbruch	Beibehalten	Kein Umbruch
`pre-wrap`	Beibehalten	Beibehalten	Umbruch	Hängen	Hängen
`pre-line`	Beibehalten	Zusammenfassen	Umbruch	Entfernen	Hängen

Ein Tabulator entspricht standardmäßig 8 Leerzeichen und kann mithilfe dertab-size-Eigenschaft konfiguriert werden. Im Fall vonnormal,nowrap undpre-line Werten wird jeder Tabulator in ein Leerzeichen (U+0020) umgewandelt.

Hinweis:Es wird zwischenLeerzeichen undanderen Leerraum-Trennzeichen unterschieden. Diese sind wie folgt definiert:

Leerzeichen: Leerzeichen (U+0020), Tabulatoren (U+0009) und Segmentumbrüche (wie Zeilenumbruchzeichen).
Andere Leerraum-Trennzeichen: Alle anderen Leerraum-Trennzeichen, die in Unicode definiert sind, außer denen, die bereits als Leerzeichen definiert sind.

Wo Leerraumhängt, kann dies die Größe der Box beeinflussen, wenn sie für die intrinsische Größenbestimmung gemessen wird.

Formale Definition

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

Formale Syntax

white-space =
normal|
pre|
pre-wrap|
pre-line|
<'white-space-collapse'>||<'text-wrap-mode'>||<'white-space-trim'>

<white-space-collapse> =
collapse|
discard|
preserve|
preserve-breaks|
preserve-spaces|
break-spaces

<text-wrap-mode> =
wrap|
nowrap

<white-space-trim> =
none|
discard-before||discard-after||discard-inner

Beispiele

Grundlegendes Beispiel

css

code {  white-space: pre;}

Zeilenumbrüche innerhalb von <pre>-Elementen

css

pre {  white-space: pre-wrap;}

In Aktion

<div>  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>  <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: gainsboro;  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);});

Zeilenumbruchsteuerung in Tabellen

HTML

html

<table>  <tbody>    <tr>      <td></td>      <td>Very long content that splits</td>      <td>Very long content that don't split</td>    </tr>    <tr>      <td>white-space:</td>      <td>normal</td>      <td>nowrap</td>    </tr>  </tbody></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 in einem SVG-Text-Element

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

HTML

Der Text im<text>-Element muss in mehrere Zeilen aufgeteilt werden, damit die neuen Zeilen erkannt werden. Nach der ersten Zeile muss der restliche Leerraum entfernt werden.

html

<svg viewBox="0 0 320 150">  <text y="20" x="10">Here is an English paragraphthat is broken into multiple linesin the source code so that it canbe more easily read and editedin a text editor.  </text></svg>