Ordafstand - CSS-tricks

Anonim

Den word-spacingegenskab ligner letter-spacing, men naturligvis dets anvendelse regulerer mængden af plads mellem ordene i et stykke tekst, ikke de enkelte tegn.

p ( word-spacing: 2em; )

word-spacing kan modtage tre forskellige værdier:

  1. det "normale" nøgleord, som nulstiller standardafstanden
  2. længdeværdier ved hjælp af alle CSS-enheder (oftest px, em, rem)
  3. nøgleordet "arve", der anvender word-spacingdet overordnede element

Bedste praksis på dette tidspunkt ville være at bruge em. Skriftstørrelsen kan justeres, så brug af pixels til dette kan forårsage problemer med afstanden mellem ord, der ikke skaleres, som deres størrelse gjorde. remer fantastisk normalt, men browserunderstøttelse er lavere, og i dette tilfælde er det sandsynligvis bedst, at afstanden er relevant direkte for de ord, den anvendes på, ikke roden.

Det er vigtigt at bemærke, at "ord" i denne sammenhæng faktisk refererer til et entydigt stykke integreret indhold - hvilket betyder, at det word-spacingpåvirker inline-blocksåvel inlineelementer som elementer. I dette eksempel er adskillige sådanne elementer adskilt ved at indstille word-spacingderes overordnede container:

Tjek denne pen!

Interessepunkter

  • Den word-spacingegenskab er animatable med CSS Overgange.
  • Mens brug af "procent" -værdien til bestemmelse af afstand er tilladt i henhold til specifikationen, kan den give uforudsigelige resultater - ofte slet ingen effekt.
  • At indstille hvidt mellemrum til nul er en af ​​måderne til at bekæmpe rummet mellem indbyggede blokelementer.

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Arbejder Arbejder Arbejder Arbejder Arbejder Mest Arbejder

En note om Android-browsersupport: Langt størstedelen af ​​Android-enheder understøtter dog word-spacing- nogle enheder, der bruger ikke-Apple-builds af Webkit eller Netfront-browseren ikke. Specifikationerne er detaljeret i QuirksMode-linket ovenfor.