Własność CSS white-space

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