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

Czas czytania: < 1 minut

Właściwość CSS word-spacing służy do określania wielkość odstępów pomiędzy wyrazami występującymi w danym tekście na stronie internetowej.

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śćChromeInternet Explorer
/ Edge
FirefoxSafariOpera
word-spacing1.06.01.01.03.5

źródła: