Tarpai tarp žodžių - CSS-gudrybės

Anonim

word-spacingNuosavybė yra panašus į letter-spacing, nors, žinoma, jo naudojimas reglamentuojamas tarpas tarp žodžių kiekį teksto fragmentą, o ne atskirus simbolius.

p ( word-spacing: 2em; )

word-spacing gali gauti tris skirtingas vertes:

  1. „normalus“ raktinis žodis, kuris atstato numatytąjį tarpą
  2. ilgio vertės naudojant bet kokius CSS vienetus (dažniausiai px, em, rem)
  3. raktinis žodis „paveldėti“, kuris taiko word-spacingpagrindinį elementą

Geriausia praktika šiuo metu būtų naudoti em. Šrifto dydį galima koreguoti, todėl tam naudojant pikselius gali kilti problemų dėl žodžių atstumo, nes jų dydis nesumažėjo. rempaprastai yra puikus, tačiau naršyklės palaikymas yra mažesnis ir šiuo naudojimo atveju tikriausiai geriausia, kad tarpai būtų tiesiogiai susiję su žodžiais, kuriems jis taikomas, o ne šaknimi.

Svarbu pažymėti, kad „žodis“ šiame kontekste iš tikrųjų reiškia vienetinį vidinio turinio gabalą, o tai reiškia, kad jis word-spacingveikia ir inline-blockelementus, ir inlineelementus. Šiame pavyzdyje keli tokie elementai yra išdėstyti nustatant word-spacingjų pagrindinį konteinerį:

Patikrinkite šį rašiklį!

Lankytinos vietos

  • Ši word-spacingnuosavybė gali būti pritaikyta CSS perėjimams.
  • Nors „procentų“ vertę nustatyti tarpams leidžiama naudoti pagal specifikaciją, tai gali duoti nenuspėjamų rezultatų - dažnai tiesiog neturi jokio poveikio.
  • Baltosios erdvės nustatymas į nulį yra vienas iš būdų kovoti su tarpu tarp įterptinių blokų elementų.

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Veikia Veikia Veikia Veikia Veikia Dauguma Veikia

Pastaba apie „Android“ naršyklės palaikymą: didžioji dauguma „Android“ įrenginių palaiko word-spacing, tačiau kai kurie įrenginiai, naudojantys ne „Apple“ „Webkit“ versijas, ar „Netfront“ naršyklė, to nedaro. Specifika yra išsamiai aprašyta aukščiau esančioje nuorodoje „QuirksMode“.