Razmik med besedami - CSS-triki

Anonim

word-spacingLastnost je podoben letter-spacing, čeprav je seveda njegova uporaba ureja količino prostora med besedami v delu besedila, ne pa posameznih znakov.

p ( word-spacing: 2em; )

word-spacing lahko prejme tri različne vrednosti:

  1. ključna beseda “normal”, ki ponastavi privzeti razmik
  2. vrednosti dolžine z uporabo katerih koli enot CSS (najpogosteje px, em, rem)
  3. ključna beseda "naslediti", ki uporablja word-spacingnadrejeni element

Najboljša praksa v tem času bi bila uporaba em. Velikost pisave je mogoče prilagoditi, zato bi uporaba pikslov za to lahko povzročila težave pri razmiku med besedami, ne bi se spreminjala njihova velikost. remje ponavadi super, vendar je podpora za brskalnik nižja in v tem primeru je verjetno najbolje, da je razmik povezan neposredno z besedami, za katere se uporablja, in ne korenom.

Pomembno je omeniti, da se beseda v tem kontekstu dejansko nanaša na posamezen del vstavljene vsebine, kar pomeni, da word-spacingvpliva inline-blocktako na elemente kot na inlineelemente. V tem primeru je več takih elementov razporejenih z nastavitvijo word-spacingnadrejenega vsebnika:

Oglejte si to pisalo!

Zanimivosti

  • word-spacingLastnost je animatable s CSS Transitions.
  • Medtem ko je uporaba "odstotka" vrednosti za določanje razmika dovoljena v skladu s specifikacijami, lahko prinese nepredvidljive rezultate - pogosto preprosto brez učinka.
  • Nastavitev presledka na nič je eden od načinov boja proti prostoru med vgrajenimi elementi bloka.

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Deluje Deluje Deluje Deluje Deluje Večina Deluje

Opomba o podpori brskalnikov Android: Velika večina naprav Android podpira word-spacing- nekatere naprave, ki uporabljajo različice Webkit ali brskalnik Netfront, ki niso Apple. Podrobnosti so podrobno opisane na zgornji povezavi QuirksMode.