Działania na białych znakach (whitespace) w HTML i CSS

Jedną z istotnych rzeczy o jakiej należy pamiętać dodając tekst na stronę internetową są tak zwane białe znaki (z ang. white space, whitespace).

Co to znaczy white space?

White space (biała przestrzeń, białe znaki) to odstępy występujące w ciągu treściowym elementu HTML.W praktyce więc każda przerwa pomiędzy wyrazami jest do nich zaliczana.

Dla lepszego zrozumienia uściślijmy, a więc chodzi o elementy takie jak:

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

Białe znaki w HTML

Część białych znaków występujących na stronie internetowej jest domyślna lub dodawana z pomocą klawiatury komputerowej. Istnieją jednak znaki, które można dodać z pomocą kodu np. HTML

 	Twarda spacja, nie łamliwa
 	2 x spacja
 	3 x spacja
 	4 x spacja
<p></p>	nowy akapit, paragraf
<br>	przerwanie linii
<pre></pre>	tekst przeformatowany

Edycja białych znaków z pomocą CSS

Inną formą manipulacji / edycji sposobu działania białych znaków (whitespace) jest CSS

padding	odstęp wewnętrzny
margin	odstęp zewnętrzny
line-height	określa odstępy między liniami tekstu
letter-spacing	dodaje lub zmniejsza odstępy pomiędzy literami w wyrazach
word-spacing	dodaje odstępy pomiędzy wyrazami
white-space	zmienia sposób wyświetlania białych znaków

Większość z opcji opisałam już wcześniej w innych artykułach dlatego odsyłam was do nich. Poniżej znajdziecie informacje o brakującej:

Właściwość CSS white space

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”.

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

white-space: normal;

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