CSS white-space-Eigenschaft
Die white-space-Eigenschaft legt fest, wie der Leerraum innerhalb eines Elements behandelt wird. Ein Leerraum kann eine Folge von Leerzeichen oder ein Zeilenumbruch sein.
Diese Eigenschaft kann auf jeden Inline-Inhalt innerhalb eines Elements angewendet werden.
Zusätzliche angegebene Leerzeichen werden zu einem zusammengefasst, Zeilenumbrüche werden entfernt, und Zeilen werden bei Bedarf umgebrochen, um in ihren Container zu passen.
| Startwert | normal |
|---|---|
| Gilt für | Inline- und Tabellenzellen-Elemente, 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 white-space-Eigenschaft
css
white-space: normal | nowrap | pre | pre-line | pre-wrap | break-space | initial | inherit;Beispiel für die white-space-Eigenschaft mit dem Wert "normal":
Beispiel für die CSS white-space-Eigenschaft mit dem Wert normal
html
<!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
In diesem Beispiel wird der Text bei Bedarf in die nächste Zeile umgebrochen.
Beispiel für die white-space-Eigenschaft mit dem Wert "nowrap":
Beispiel für die CSS white-space-Eigenschaft mit dem Wert nowrap
html
<!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 für die white-space-Eigenschaft mit dem Wert "pre-line":
Beispiel für die CSS white-space-Eigenschaft mit dem Wert pre-line
html
<!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 können Sie den Unterschied zwischen den Werten "nowrap", "normal" und "pre-wrap" sehen.
Beispiel für die white-space-Eigenschaft mit drei Werten:
Beispiel für die CSS white-space-Eigenschaft mit den Werten nowrap, normal und pre-wrap
html
<!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 | Ausführen |
|---|---|---|
| normal | Bricht Zeilen bei Bedarf um, um die Zeilenboxen auszufüllen. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| nowrap | Mit diesem Wert wird der Text niemals in die nächste Zeile umgebrochen. | Ausführen » |
| pre | Bewahrt sowohl Leerzeichen als auch Zeilenumbrüche. Der Text wird nicht in die nächste Zeile umgebrochen. | Ausführen » |
| pre-line | Leerzeichenfolgen werden zu einem einzelnen Leerzeichen zusammengefasst. Der Text wird bei Bedarf und bei Zeilenumbrüchen umgebrochen. | Ausführen » |
| pre-wrap | Leerzeichen werden vom Browser beibehalten. Der Text wird bei Bedarf und bei Zeilenumbrüchen umgebrochen. | Ausführen » |
| break-space | Das gleiche Verhalten wie "pre-wrap", außer: - jede Folge von beibehaltenen Leerzeichen nimmt immer Platz ein, auch am Ende der Zeile - eine Zeilenumbruchmöglichkeit besteht nach jedem beibehaltenen Leerzeichenzeichen, auch zwischen Leerzeichenzeichen - solche beibehaltenen Leerzeichen nehmen Platz ein und hängen nicht, wodurch sie die inhärenten Größen der Box beeinflussen | |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Eigenschaften hat der Wert 'white-space' in CSS?