word-spacing
Nieruchomość jest podobna do letter-spacing
, choć oczywiście jej stosowanie reguluje ilość przestrzeni między słowami w kawałek tekstu, a nie pojedynczych znaków.
p ( word-spacing: 2em; )
word-spacing
może otrzymać trzy różne wartości:
- słowo kluczowe „normal”, które resetuje domyślne odstępy
- wartości długości przy użyciu dowolnych jednostek CSS (najczęściej px, em, rem)
- słowo kluczowe „inherit”, które stosuje
word-spacing
element nadrzędny
Najlepszą praktyką w tej chwili byłoby użycie em
. Rozmiar czcionki można dostosować, więc użycie pikseli w tym celu może spowodować problemy z odstępami między słowami, które nie będą skalowane tak, jak ich rozmiar. rem
jest zwykle świetny, ale obsługa przeglądarek jest niższa, aw tym przypadku prawdopodobnie najlepiej jest, gdy odstępy są bezpośrednio związane ze słowami, do których są stosowane, a nie rdzeniem.
Należy zauważyć, że „słowo” w tym kontekście w rzeczywistości odnosi się do pojedynczego fragmentu treści wbudowanej, co oznacza, że word-spacing
wpływa zarówno na inline-block
elementy, jak i inline
elementy. W tym przykładzie kilka takich elementów jest rozmieszczonych poprzez ustawienie word-spacing
ich kontenera nadrzędnego:
Sprawdź ten długopis!
Użyteczne miejsca
word-spacing
Nieruchomość jest animatable z CSS Transitions.- Chociaż użycie wartości „procentowej” do określenia odstępów jest dozwolone zgodnie ze specyfikacją, może przynieść nieprzewidywalne wyniki - często po prostu nie ma żadnego wpływu.
- Ustawienie odstępu na zero jest jednym ze sposobów walki z odstępami między wbudowanymi elementami blokowymi.
Wsparcie przeglądarki
Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
---|---|---|---|---|---|---|
Pracuje | Pracuje | Pracuje | Pracuje | Pracuje | Większość | Pracuje |
Uwaga na temat obsługi przeglądarek Android: Zdecydowana większość urządzeń z Androidem obsługuje - word-spacing
jednak niektóre urządzenia korzystające z wersji Webkit lub przeglądarki Netfront firmy innej niż Apple nie obsługują. Szczegóły opisano w powyższym linku QuirksMode.