Ordavstand - CSS-triks

Anonim

Den word-spacingegenskapen er lik letter-spacing, men selvsagt bruken styrer avstanden mellom ordene i en tekst, ikke de enkelte tegn.

p ( word-spacing: 2em; )

word-spacing kan motta tre forskjellige verdier:

  1. det "normale" nøkkelordet, som tilbakestiller standardavstanden
  2. lengdeverdier ved bruk av CSS-enheter (oftest px, em, rem)
  3. søkeordet "arve", som bruker word-spacingdet overordnede elementet

Beste fremgangsmåten på dette tidspunktet vil være å bruke em. Skriftstørrelsen kan justeres, så bruk av piksler for dette kan forårsake problemer med avstanden mellom ordene, ikke kan skaleres slik størrelsen gjorde. remer bra vanligvis, men nettleserstøtten er lavere, og i dette brukstilfellet er det sannsynligvis best at avstanden er relevant direkte for ordene den blir brukt på, ikke roten.

Det er viktig å merke seg at “ord” i denne sammenhengen faktisk refererer til et enkelt stykke innebygd innhold - noe som betyr at det word-spacingpåvirker inline-blockså vel inlineelementer som elementer. I dette eksemplet er flere slike elementer fordelt ved å angi word-spacingfor deres overordnede container:

Sjekk ut denne pennen!

Interessepunkt

  • Den word-spacingegenskapen er animatable med CSS Transitions.
  • Selv om bruk av "prosent" -verdien for å bestemme avstand er tillatt i henhold til spesifikasjonen, kan den gi uforutsigbare resultater - ofte rett og slett ingen effekt i det hele tatt.
  • Å sette hvitt mellomrom til null er en av måtene å kjempe mot rommet mellom innebygde blokkelementer.

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Virker Virker Virker Virker Virker Mest Virker

En merknad om Android-nettleserstøtte: De aller fleste Android-enheter støtter word-spacing- noen enheter som ikke bruker Apple-versjoner av Webkit eller Netfront-nettleseren, gjør det imidlertid ikke. Spesifikasjonene er detaljert i QuirksMode-lenken ovenfor.