tutoriale
by: Aurelia SypniewskaPosted on:

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

Czas czytania: 2 minut

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

paddingodstęp wewnętrzny
marginodstęp zewnętrzny
line-heightokreśla odstępy między liniami tekstu
letter-spacingdodaje lub zmniejsza odstępy pomiędzy literami w wyrazach
word-spacingdodaje odstępy pomiędzy wyrazami
white-spacezmienia sposób wyświetlania białych znaków
białe znaki spacje
białe znaki spacje

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;

– 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: