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;
– 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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.