CSS white-space Eigenschaft
Die CSS-Eigenschaft white-space steuert, wie Leerzeichen in einem Element behandelt werden. Werte, Verhalten und Beispiele im Überblick.
Die CSS-Eigenschaft white-space steuert gleichzeitig zwei Dinge: wie Folgen von Leerzeichen (Leerzeichen, Tabulatoren und Zeilenumbrüche im HTML-Quellcode) zusammengefasst oder erhalten werden, und ob Text umbricht, wenn er den Rand seines Containers erreicht.
Standardmäßig gehen Browser aggressiv mit Leerzeichen um. Jede Folge von Leerzeichen, Tabulatoren oder Zeilenumbrüchen im Markup wird auf ein einzelnes Leerzeichen reduziert, und der Text bricht bei Bedarf um, um in seine Box zu passen. Deshalb wird Folgendes:
<p>Hello world</p>als Hello world mit einem einzigen Leerzeichen gerendert, egal wie viele Leerzeichen eingegeben wurden. Die Eigenschaft white-space ermöglicht es, dieses Verhalten zu ändern — zum Beispiel, um die Formatierung von Quellcode beizubehalten, die Zeilenumbrüche eines Gedichts zu erhalten oder zu verhindern, dass eine Beschriftung auf zwei Zeilen umgebrochen wird.
Wann verwenden
nowrap— hält eine Schaltflächenbeschriftung, eine Tabellenzelle oder ein Navigationselement auf einer einzelnen Zeile.pre/pre-wrap— zeigt vorformatierten Text (Code, ASCII-Art, Einrückungen) an, bei dem die eingegebenen Leerzeichen und Zeilenumbrüche erhalten bleiben müssen. Das ist das Standardverhalten des Elements<pre>.pre-line— behält die im Quellcode geschriebenen Zeilenumbrüche bei, reduziert aber zusätzliche Leerzeichen — praktisch für Adressen oder kurze mehrzeilige Nachrichten, die als Klartext gespeichert sind.
Wenn das Ziel darin besteht, lange nicht trennbare Wörter (wie eine URL) zu umbrechen, anstatt Leerzeichen im Quellcode zu steuern, sollte stattdessen overflow-wrap oder word-break verwendet werden.
Verhalten der einzelnen Werte
Die folgende Tabelle fasst zusammen, wie jeder Wert mit Zeilenumbrüchen, Leerzeichen und Tabulatoren sowie dem Textumbruch umgeht.
| Wert | Neue Zeilen | Leerzeichen & Tabs | Textumbruch |
|---|---|---|---|
normal | Zusammenfassen | Zusammenfassen | Umbruch |
nowrap | Zusammenfassen | Zusammenfassen | Kein Umbruch |
pre | Erhalten | Erhalten | Kein Umbruch |
pre-wrap | Erhalten | Erhalten | Umbruch |
pre-line | Erhalten | Zusammenfassen | Umbruch |
break-spaces | Erhalten | Erhalten | Umbruch (auch nach jedem Leerzeichen) |
| Standardwert | normal |
|---|---|
| Gilt für | Inline-Elemente und Tabellenzellen, gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die white-space-Eigenschaft ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.whiteSpace = "nowrap"; |
Syntax
Syntax der CSS-Eigenschaft white-space
white-space: normal | nowrap | pre | pre-line | pre-wrap | break-spaces | initial | inherit;Beispiel der white-space-Eigenschaft mit dem Wert "normal"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: normal;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Ergebnis
Mit normal werden Leerzeichenfolgen im Quellcode auf einzelne Leerzeichen reduziert, und der Text bricht auf eine neue Zeile um, sobald er den Rand des <div> erreicht.
Beispiel der white-space-Eigenschaft mit dem Wert "nowrap"
Mit nowrap werden Leerzeichen ebenfalls zusammengefasst, aber der Text bricht nie um. Er läuft stattdessen über den Rand des Containers hinaus, anstatt auf eine zweite Zeile zu wechseln, was in der Regel einen horizontalen Überlauf verursacht (oft in Kombination mit text-overflow verwendet, um ein Auslassungszeichen hinzuzufügen).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Beispiel der white-space-Eigenschaft mit dem Wert "pre-line"
Mit pre-line werden Leerzeichenfolgen weiterhin auf eines zusammengefasst, aber im HTML-Quellcode geschriebene Zeilenumbrüche bleiben erhalten, und der Text bricht bei Bedarf weiterhin um.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: pre-line;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Im nächsten Beispiel ist der Unterschied zwischen den Werten nowrap, normal und pre-wrap nebeneinander zu sehen.
Beispiel der white-space-Eigenschaft mit drei Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.t1 {
white-space: nowrap;
}
p.t2 {
white-space: normal;
}
p.t3 {
white-space: pre-wrap;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<h3>white-space: nowrap;</h3>
<p class="t1">
Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
<h3>white-space: normal;</h3>
<p class="t2">
Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
<h3>white-space: pre-wrap;</h3>
<p class="t3">
Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| normal | Bricht Zeilen bei Bedarf um, um Zeilenboxen zu füllen. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| nowrap | Mit diesem Wert wird der Text niemals auf die nächste Zeile umgebrochen. | Ausprobieren » |
| pre | Erhält sowohl Leerzeichen als auch Zeilenumbrüche. Text wird nicht auf die nächste Zeile umgebrochen. | Ausprobieren » |
| pre-line | Leerzeichenfolgen werden auf ein einzelnes Leerzeichen zusammengefasst. Text bricht bei Bedarf und bei Zeilenumbrüchen um. | Ausprobieren » |
| pre-wrap | Leerzeichen werden vom Browser erhalten. Text bricht bei Bedarf und bei Zeilenumbrüchen um. | Ausprobieren » |
| break-spaces | Verhält sich wie "pre-wrap", außer dass: jede Folge von beibehaltenen Leerzeichen immer Platz einnimmt (auch am Zeilenende), nach jedem beibehaltenen Leerzeichen eine Zeilenumbruchmöglichkeit besteht und diese Leerzeichen die intrinsische Größe der Box beeinflussen, anstatt zu hängen. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
- overflow-wrap und word-break — steuern, wo lange, nicht trennbare Zeichenketten umgebrochen werden.
- text-overflow — in Kombination mit
white-space: nowrapverwenden, um Text mit einem Auslassungszeichen abzuschneiden. - word-wrap — der veraltete Alias für
overflow-wrap. - overflow — bestimmt, was mit Inhalten passiert, die über ihren Container hinausgehen, wenn sie nicht umbrechen.