Własność CSS white-space określa sposób traktowania białych znaków (spacji i tabulatorów) w elemencie oraz pozwala sterować łamaniem wierszy w tzw. miękkich punktach podziału.
Wartości i składnia
Własność white-space
jako wartość przyjmuje jedno z poniższych słów kluczowych:
normal
- Serie białych znaków są redukowane do jednego znaku, wiersze mogą być łamane – wartość domyślna.
pre
- Serie białych znaków zostają zachowane, wiersze są łamane tylko w miejscach wymuszonego podziału, np. na elemencie
br
. Jeśli treść nie mieści się w kontenerze, to wychodzi poza jego granice. nowrap
- Działa jak połączenie wartości
normal
+pre
, czyli redukuje serie białych znaków do jednego znaku oraz nie pozwala na łamanie wierszy. pre-wrap
- Działa jak połączenie wartości
pre
+normal
, czyli zachowuje serie białych znaków, ale pozwala na łamanie wierszy. break-spaces
- Działa tak samo, jak
pre-wrap
, ale zachowane serie białych znaków zawsze zajmują miejsce, nawet na końcu wiersza oraz po każdym zachowanym białym znaku, także między nimi, jest możliwość złamania wiersza. pre-line
- Serie białych znaków zostają zachowane, a wiersze mogą być łamane w razie konieczności oraz na znakach złamania wiersza
Przykłady
W poniższym przykładzie serie białych znaków będą zredukowane do pojedynczego znaku oraz nie będzie dochodziło do złamania wiersza. Dlatego, jeśli tekst nie zmieści się w elemencie, to wyjdzie poza jego granice, jak widać na poniższej ilustracji.
<style>
p {
width: 200px;
outline: 1px solid black;
white-space: nowrap;
}
</style>
...
<p>Lorem ipsum dolor sit amet, consectetur</p>
Efekt:

Podsumowanie
Zastosowanie | Tekst |
---|---|
Obsługiwane wartości | Słowa kluczowe: normal , pre , nowrap , pre-wrap , break-spaces , pre-line |
Wartość początkowa | normal |
Dziedziczenie | Tak |
Specyfikacja | CSS Text Module Level 3, white-space |