word-spacing jest własnością CSS określającą wielkość odstępów pomiędzy wyrazami występującymi w danym tekście.
Może przyjmować zarówno wartości dodatnie jak i ujemne (nie wszystkie przeglądarki obsługują). Stosując word-spacing można zdefiniować do trzech wartości, w celu wskazania minimalnej, maksymalnej oraz optymalnej przerwy pomiędzy słowami.
Przyjmowane Wartości przez word-spacing
word-spacing: normal|length|initial|inherit;
Najlepiej by zrozumieć jak działa dodawanie odstępów pomiędzy wyrazami w akapicie posłużyć się przykładami:
Przykład wartością 12px oraz ramką w celu widocznego odcięcia:
W kodzie wygląda on następująco:
<div style="word-spacing: 4px; border: 1px solid #ccc"> Przykładowy tekst z zastosowaniem odstępów między wyrazami. </div>
Przykład wartością 6px:
<div style="word-spacing: 6px; border: 1px solid #ccc"> Przykładowy tekst z zastosowaniem odstępów między wyrazami. </div>
Przykład wartością 20px:
<div style="word-spacing: 20px; border: 1px solid #ccc"> Przykładowy tekst z zastosowaniem odstępów między wyrazami. </div>
Przykład wartością -2px:
<div style="word-spacing: -2px; border: 1px solid #ccc"> Przykładowy tekst z zastosowaniem odstępów między wyrazami. </div>
Przykład wartością -6px:
<div style="word-spacing: -6px; border: 1px solid #ccc"> Przykładowy tekst z zastosowaniem odstępów między wyrazami. </div>
Obsługa przez przeglądarki
Właściwość | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
word-spacing | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
źródła:
https://www.w3schools.com/cssref/pr_text_word-spacing.asp
https://developer.mozilla.org/pl/docs/Web/CSS/word-spacing
http://webkod.pl/kurs-css/wlasciwosci/wszystkie/word-spacing