Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >white-space

white-space

Ustala, co przeglądarka robi ze spacjami i znakami nowego wiersza ze źródła HTML i czy może zawijać tekst. Domyślnie kilka spacji i znaków nowego wiersza zlewa się w jedną spację, a wiersze zawijają się według szerokości.

Wartości

normal – domyślnie: spacje się zlewają, znaki nowego wiersza są pomijane, tekst się zawija.
nowrap – spacje się zlewają, ale tekst się nie zawija (tylko przy <br>).
pre – spacje i znaki nowego wiersza zostają jak w HTML, bez zawijania (domyślne dla <pre>).
pre-wrap – jak pre, ale długie wiersze się zawijają.
pre-line – spacje się zlewają, znaki nowego wiersza zostają, tekst się zawija (tekst z formularza, wiersze).
break-spaces – jak pre-wrap, ale spacje na końcu wiersza zajmują miejsce i wiersz może się po nich zawinąć.

Nowsza specyfikacja zrobiła z white-space skrót dla white-space-collapse i text-wrap-mode; klasyczne wartości działają dalej.

Wartość początkowa: normal. Dziedziczona: tak. Dotyczy: wszystkich elementów.

Przykłady

Ten sam tekst ze spacjami i znakami nowego wiersza w HTML:

<p class="normal">Wiersz   ze   spacjami
i drugi wiersz</p>
<p class="pre-line">Wiersz   ze   spacjami
i drugi wiersz</p>
<p class="pre-wrap">Wiersz   ze   spacjami
i drugi wiersz</p>

p {
  max-width: 280px;
  margin: 0 0 6px;
  padding: 4px 6px;
  border: 1px dashed #999;
}
.normal { white-space: normal; }
.pre-line { white-space: pre-line; }
.pre-wrap { white-space: pre-wrap; }

Wynik

Wiersz ze spacjami i drugi wiersz

Cena, której nie wolno rozdzielić na dwa wiersze:

<p class="row">Cena: <span class="price">1 290 zł</span> z VAT i dostawą na terenie całej Polski.</p>

.row { max-width: 200px; }
.price { white-space: nowrap; font-weight: bold; }

Wynik

Cena: 1 290 zł z VAT i dostawą na terenie całej Polski.

Na co uważać

nowrap i pre mogą na telefonie wychodzić w bok – łącz je z overflow-x: auto albo text-overflow.
Do twardej spacji w jednym miejscu (liczba i jednostka, „s. 12”) prostsze jest   w HTML.
Tekst z formularza zapisany ze znakami nowego wiersza pre-line pokaże z jego wierszami – bez zamiany na <br>.
W textarea zawijaniem także steruje white-space (domyślnie pre-wrap).

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
overflow-wrap
word-break
text-overflow
text-wrap
tab-size