tutoriale

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

Czas czytania: 2 minut

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;

– przykładowy tekst w umieszczony w div
– z właściwością normal
– z 3 punktami


Teraz przetestujemy white-space: nowrap;

– przykładowy tekst w umieszczony w div
– z właściwością nowrap
– z 3 punktami


Kolej na white-space: pre;

– przykładowy tekst w umieszczony w div
– z właściwością pre
– z 3 punktami


Następnie white-space: pre-wrap;

– przykładowy tekst w umieszczony w div
– z właściwością normal
– z 3 punktami


Następnie white-space: pre-line;

– przykładowy tekst w umieszczony w div
– z właściwością normal
– z 3 punktami


Teraz white-space: initial;

– przykładowy tekst w umieszczony w div
– z właściwością initial
– z 3 punktami


Jako ostatni white-space: inherit;

– przykładowy tekst w umieszczony w div
– z właściwością inherit
– z 3 punktami

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