Własność CSS word-spacing, czyli jak uzyskać odstępy między wyrazami

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

ź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