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 |
