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;
To tyle z teorii, aby w jak najlepiej zrozumieć dodawanie odstępów pomiędzy wyrazami najlepiej ten efekt zobaczyć w praktyce. Postaram się wam pokazać różnego typu przykłady tak byście mogli następnie samodzielnie dodawać dystanse pomiędzy słowami na waszych stronach.
See the Pen
word-spacing by Aura (@Julka85)
on CodePen.0
Przy zastosowaniu wartości ujemnej prześwit pomiędzy słowami w istotny sposób się zmniejszył. Dzięki tej właściwości możemy więc nie tylko rozsuwać od siebie słowa jak gdyby ściskać je ze sobą.
Odpowiednio niska wartość word-spacing może sprawić, że słowa w akapicie praktycznie będą na siebie na chodzić. Pokazane jest to w ostatnim przykładzie. Widocznie brakuje tam przerw między pojedynczymi słowami, co daje efekt jak by wszystko było pisane jednym ciągiem. Jedno długie słowo zamiast krótkiego tekstu.
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
