Die Leerraum-Eigenschaft steuert, wie Text auf das Element angewendet wird, auf das er angewendet wird. Angenommen, Sie haben HTML genau so:
A bunch of words you see. Sie haben das div so gestaltet, dass es eine festgelegte Breite von 100px hat. Bei einer angemessenen Schriftgröße ist das zu viel Text, um in 100 Pixel zu passen. Ohne etwas zu tun, ist der Standard white-spaceist Wert normal, und der Text wird wickeln. Sehen Sie sich das folgende Beispiel an oder folgen Sie der Demo zu Hause.
div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )
Wenn Sie verhindern möchten, dass der Text umbrochen wird, können Sie ihn anwenden white-space: nowrap;
Beachten Sie im HTML-Codebeispiel oben in diesem Artikel, dass es tatsächlich zwei Zeilenumbrüche gibt, einen vor und einen nach der Textzeile, die es dem Text ermöglichen, sich in einer eigenen Zeile (im Code) zu befinden. Wenn der Text im Browser gerendert wird, werden diese Zeilenumbrüche so angezeigt, als wären sie entfernt. Ebenfalls entfernt sind die zusätzlichen Leerzeichen in der Zeile vor dem ersten Buchstaben. Wenn wir den Browser zwingen möchten, diese Zeilenumbrüche und zusätzlichen Leerzeichen anzuzeigen, können wir sie verwendenwhite-space: pre;
Es wird aufgerufen, preweil das Verhalten so ist, als hätten Sie den Text eingewickelt
Vielleicht gefällt Ihnen, wie preLeerzeichen und Unterbrechungen berücksichtigt werden, aber Sie müssen den Text umbrechen, anstatt ihn möglicherweise aus dem übergeordneten Container auszubrechen. Dafür white-space: pre-wrap;ist da:
Schließlich white-space: pre-line;werden Zeilen dort unterbrochen, wo sie im Code unterbrochen werden, aber der zusätzliche Leerraum wird immer noch entfernt.
Interessanterweise wird der letzte Zeilenumbruch nicht berücksichtigt. Gemäß der CSS 2.1-Spezifikation: „Zeilen werden bei beibehaltenen Zeilenumbrüchen und nach Bedarf zum Füllen von Zeilenfeldern unterbrochen.“ Vielleicht macht das Sinn.
Hier ist eine Tabelle, um das Verhalten aller verschiedenen Werte zu verstehen:
| Neue Zeilen | Leerzeichen und Tabulatoren | Textumbruch | |
|---|---|---|---|
| normal | Zusammenbruch | Zusammenbruch | Wickeln |
| Vor | Erhalten | Erhalten | Kein Wrap |
| Nowrap | Zusammenbruch | Zusammenbruch | Kein Wrap |
| vorverpacken | Erhalten | Erhalten | Wickeln |
| Vorzeile | Erhalten | Zusammenbruch | Wickeln |
In CSS3, das white-spaceist Eigentum buchstäblich gehen , dass die Grafik zu folgen und die Eigenschaften zuzuordnen text-space-collapseund text-wrapdementsprechend.
Mehr Informationen
- Mozilla Docs
Browser-Unterstützung
Etwas komplexer als die reguläre Supporttabelle, da jeder Wert unterschiedliche Supportstufen hat:
| Browser | Ausführung | Unterstützung von |
|---|---|---|
| Internet Explorer | 5.5 | normal | nowrap |
| 6.0 | normal | pre | nowrap |
|
| 8+ | normal | pre | nowrap | pre-wrap | pre-line |
|
| Firefox (Gecko) | 1,0 (1,0) | normal | pre | nowrap | -moz-pre-wrap |
| 3,0 (1,9) | normal | pre | nowrap | pre-wrap | -moz-pre-wrap |
|
| 3,5 (1.9.1) | normal | pre | nowrap | pre-wrap | pre-line |
|
| Oper | 4.0 | normal | pre | nowrap |
| 8.0 | normal | pre | nowrap | pre-wrap |
|
| 9.5 | normal | pre | nowrap | pre-wrap | pre-line |
|
| Safari (WebKit) | 1,0 (85) | normal | pre | nowrap |
| 3,0 (522) | normal | pre | nowrap | pre-wrap | pre-line |