white-space
Decyduje, jak traktować spacje, entery i zawijanie linii w tekście.
- Wartość domyślna
normal- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.whiteSpace = "nowrap"
Przykład
#.message {
white-space: pre-line;
}<p class="message stage" style="white-space: pre-line; margin: 0;">Cześć!
Twoje zadanie zostało sprawdzone.
Wynik: 92%</p>Definicja i zastosowanie
#Domyślnie przeglądarka zamienia wiele spacji i znaków nowej linii w kodzie na jedną spację, a tekst zawija się automatycznie. Właściwość white-space pozwala to zmienić.
nowrap wyłącza zawijanie, więc tekst zostaje w jednej linii. pre zachowuje wszystkie spacje i entery dokładnie jak w kodzie, bez zawijania. pre-wrap też je zachowuje, ale pozwala zawijać długie linie, a pre-line zachowuje tylko entery.
white-space: nowrap razem z overflow: hidden i text-overflow: ellipsis to klasyczny przepis na obcięcie tekstu wielokropkiem.
Składnia
#white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;Wartości
#Wartości w praktyce
#normal
.demo { white-space: normal; }nowrap
.demo { white-space: nowrap; }pre
.demo { white-space: pre; }pre-wrap
.demo { white-space: pre-wrap; }pre-line
.demo { white-space: pre-line; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Tekst wpisany przez użytkownika, na przykład komentarz z enterami, wyświetlaj z
white-space: pre-line. - Przyciski i etykiety, które nie powinny łamać się na dwie linie, zabezpiecz przez
nowrap.
Powiązane hasła
#- text-overflowDecyduje, jak oznaczyć tekst ucięty na końcu linii, na przykład wielokropkiem.
- overflow-wrapŁamie długie wyrazy tylko wtedy, gdy inaczej wystawałyby poza kontener.
- word-breakPozwala łamać wyrazy w dowolnym miejscu, gdy nie mieszczą się w linii.
- overflowDecyduje, co zrobić z treścią, która nie mieści się w elemencie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.