Własność CSS white-space

> Dodaj do ulubionych

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:

Efekt zastosowania własności CSS white-space o wartości nowrap
Efekt działania deklaracji white-space: nowrap;

Podsumowanie

ZastosowanieTekst
Obsługiwane wartościSłowa kluczowe: normal, pre, nowrap, pre-wrap, break-spaces, pre-line
Wartość początkowanormal
DziedziczenieTak
SpecyfikacjaCSS Text Module Level 3, white-space