Właściwość white-space – działania na białych znakach

Dzięki właściwości CSS white-space mamy możliwość określić sposób interpretowania przez przeglądarkę internetową „białych znaków” (ang. whitespace).Dla nie wtajemniczonych są to odstępy występujące w ciągu treściowym elementu HTML.

Pod hasłem „białe znaki” rozumiemy elementy takie jak:

• znak tabulatora (klawisz TAB)
• znak spacji (klawisz SPACE)
• czy znak przejścia do nowej linii (klawisz ENTER)

Domyślną wartością white-space jest

white-space: normal;

Inne ustawienia jakie może mieć white-space

• normal podstawowe ustawienie, tekst zachowuje się normalnie
• nowrap powoduje nie łamanie lini. Cały tekst będzie znajdował się w jednej linijce
• pre wszystkie białe znaki w tekście będą zachowane, a linie będą przełamane jedynie na znakach nowej linii w źródle.
• pre-line Tekst będzie owinięty w razie potrzeby, a na liniach odtwarzania
• pre-wrap tekst będzie owinięty w razie potrzeby, a na liniach odtwarzania
• initial ustawia domyślną wartość
• inherit dziedziczenie właściwości z poprzedniego elementu

Przykłady zastosowania:

Zaczniemy od zaprezentowania domyślnej wartości: white-space: normal;

Teraz przetestujemy white-space: nowrap;

Kolej na white-space: pre;

Następnie white-space: pre-wrap;

Następnie white-space: pre-line;

Teraz white-space: initial;

Jako ostatni white-space: inherit;

Podstawa do przykładów:

<div style="max-width: 300px; border:1px solid #000;">- przykładowy tekst w umieszczony w div
- z właściwością normal
- z 3 punktami</div>

Właściwość white-space jest obsługiwana praktycznie przez wszystkie przeglądarki internetowe.

Źródła:
http://webkod.pl/kurs-css/wlasciwosci/wszystkie/white-space
https://www.w3schools.com/cssref/pr_text_white-space.asp