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.

Die white-space CSS Eigenschaft legt fest, wie Leerraum 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 class="default-example" id="default-example">
  <div id="example-element">
    <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 bestimmt zwei Dinge:

Ob und wie Leerraum zusammengefasst wird.
Ob und wie Zeilenumbrüche stattfinden.

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

Bestandteil-Eigenschaften

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

Hinweis: Die Spezifikation definiert eine dritte Bestandteil-Eigenschaft: white-space-trim, die 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 der white-space-Eigenschaft können als ein oder zwei Schlüsselwörter angegeben werden, die die Werte für die white-space-collapse und text-wrap-mode Eigenschaften darstellen, oder die folgenden speziellen Schlüsselwörter:

normal: Sequenzen von Leerraum werden zusammengefasst. Neue Zeilenzeichen im Quelltext werden genauso behandelt wie andere Leerzeichen. Zeilen werden nach Bedarf gebrochen, um Linienboxen zu füllen. Äquivalent zu collapse wrap.
pre: Sequenzen von Leerraum werden beibehalten. Zeilen werden nur bei neuen Zeilenzeichen im Quelltext und bei <br> Elementen gebrochen. Äquivalent zu preserve nowrap.
pre-wrap: Sequenzen von Leerraum werden beibehalten. Zeilen werden bei neuen Zeilenzeichen, bei <br> und nach Bedarf gebrochen, um Linienboxen zu füllen. Äquivalent zu preserve wrap.
pre-line: Sequenzen von Leerraum werden zusammengefasst. Zeilen werden bei neuen Zeilenzeichen, bei <br> und nach Bedarf gebrochen, um Linienboxen zu füllen. Äquivalent zu preserve-breaks wrap.

Hinweis: Die white-space-Eigenschaft als Kurzform ist eine relativ neue Funktion (siehe Browser-Kompatibilität). Ursprünglich hatte sie sechs Schlüsselwortwerte; jetzt wird der Wert nowrap stattdessen als Wert für text-wrap-mode interpretiert, während der Wert break-spaces als Wert für white-space-collapse interpretiert wird. Die obigen vier Schlüsselwörter sind immer noch spezifisch für white-space, aber sie haben lange Form-Äquivalente. Die Änderung, white-space zu einer Kurzform zu machen, erweitert die akzeptablen Werte auf noch mehr Schlüsselwörter und Kombinationen, wie wrap und collapse.

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

	Neue Zeilen	Leerzeichen und Tabs	Textumbruch	Leerzeichen am Zeilenende	Andere Leerraumtrenner 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 Tabulatorkennzeichen entspricht standardmäßig 8 Leerzeichen und kann mit der tab-size Eigenschaft konfiguriert werden. Bei den Werten normal, nowrap und pre-line wird jeder Tab in ein Leerzeichen (U+0020) Zeichen umgewandelt.

Hinweis: Es gibt eine Unterscheidung zwischen Leerzeichen und anderen Leerraumtrennern. Diese sind wie folgt definiert:

Leerzeichen: Leerzeichen (U+0020), Tabs (U+0009), und Segmentbruchzeichen (wie zum Beispiel neue Zeilen).
Andere Leerraumtrenner: Alle anderen in Unicode definierten Leerraumtrenner, außer denen, die bereits als Leerzeichen definiert sind.

Wo Leerraum gesagt wird zu hängen, kann dies die Größe der Box bei der Messung für intrinsische Größenbestimmung beeinflussen.

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

Einfaches Beispiel

css

code {
  white-space: pre;
}

Zeilenumbrüche innerhalb von <pre>-Elementen

css

pre {
  white-space: pre-wrap;
}

In der Anwendung

<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: 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 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>
  </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 SVGTextelement

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

HTML

Der Text innerhalb des <text>-Elements 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 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
Scalable Vector Graphics (SVG) 2 # TextWhiteSpace

Browser-Kompatibilität

Siehe auch

Eigenschaften, die definieren, wie Wörter innerhalb ihrer selbst brechen: overflow-wrap, word-break, hyphens
tab-size
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