Odstępy między wyrazami - CSS-Tricks

Anonim

word-spacingNieruchomość 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:

  1. słowo kluczowe „normal”, które resetuje domyślne odstępy
  2. wartości długości przy użyciu dowolnych jednostek CSS (najczęściej px, em, rem)
  3. słowo kluczowe „inherit”, które stosuje word-spacingelement 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. remjest 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-spacingwpływa zarówno na inline-blockelementy, jak i inlineelementy. W tym przykładzie kilka takich elementów jest rozmieszczonych poprzez ustawienie word-spacingich kontenera nadrzędnego:

Sprawdź ten długopis!

Użyteczne miejsca

  • word-spacingNieruchomość 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-spacingjednak 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.