Besedilo-podčrtaj-odmik - CSS-triki

Anonim

text-underline-offsetHotel v CSS nastavi razdaljo besedilnih poudarja, da je izhodiščni položaj.

.text ( text-underline-offset: 0.5em; )

Ko enkrat uporabite podčrtaj za element, ki uporablja text-decorationvrednost podčrtaja , lahko z text-underline-offsetlastnostjo poveste, kako daleč naj bo ta vrstica od vašega besedila .

Vrednote

  • auto: (Privzeto) Brskalnik bo za podčrtanja določil ustrezen odmik.
  • : Vsaka veljavna dolžina z določeno enoto (vključno z negativnimi vrednostmi). To nadomesti vse podatke v pisavi in ​​privzeti nastavitvi brskalnika.
  • percentage: Določi odmik podčrtaj kot odstotek 1em v pisavi elementa.
  • initial: Privzeta nastavitev lastnosti, ki je samodejna.
  • inherit: Sprejme podrejeno vrednost odmika nadrejenega.
  • unset: Odstrani trenutni odmik od elementa.

Demo

V naslednji predstavitvi lahko spremenite vrednost, text-underline-offsetda vidite, kako vpliva na besedilno dekoracijo elementa:

Opombe

  • text-underline-offset ni del okrajšave text-decoration.
  • Na drugih progah ne deluje, na text-decorationprimer line-throughoz overline.
  • Sprejete so negativne vrednosti, kar podčrta premakne navznoter.

Za potomce je konstantno

Ko nastavite okras za element, ga bodo imeli tudi vsi njegovi otroci. Zdaj pa si predstavljajte, da želite spremeniti odmik podčrtaja za enega od otrok:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

To ne deluje, ker ne morete preglasiti odmika podčrtaja, ki ga določajo elementi prednika. Da bo to delovalo, morate določiti posebnost podčrtaja za sam element:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Uporaba em je priporočljiva

Prednost uporabe relativne vrednosti, kot je em, je, da se bo odmik spreminjal s spremembo font-sizevrednosti. Po drugi strani pa, če uporabljate enoto s fiksno dolžino (npr. Slikovne pike), se odmik ne bo prilagodil spremembam in morda ne bo razdalja, ki bi jo želeli za svoje besedilo:

Odstotek in kaskada

Za to lastnost bo dolžina podedovana kot fiksna vrednost in se ne bo spreminjala s pisavo. Po drugi strani pa bo odstotek podedoval kot relativno vrednost, zato bo lestvico spreminjal v pisavi, kot jo podeduje.

Naslednja predstavitev prikazuje primerjavo med uporabo vrednosti em in odstotki v primeru dedovanja in, kot vidite, je na levi strani (v kateri uporabljamo em) podedovana vrednost fiksne dolžine. Izračunano vrednost lahko preverite v svojih DevTools. To pomeni, da se s spremembo pisave ne spreminja. Na desni strani pa besedila podedujejo relativno vrednost (v tem primeru 100%); torej odmična lestvica s spremembo pisave:

Načini pisanja in položaj podčrtanega besedila

Navpični način pisanja vpliva na položaj podčrtaja. To bo spremenilo smer odmika, uporabljenega na elementu. Igrajte se z vrednostmi v tej predstavitvi:

Sorodno

  • text-decoration
  • text-underline-position
  • text-decoration-thickness

Več informacij

Modul za okrasitev besedila CSS 4. stopnja (urednikov osnutek)

Podpora brskalnika

V času pisanja tega prispevka je Firefox edini brskalnik s popolno podporo. Safari ne podpira odstotnih vrednosti.

besedilo-podčrtaj-odmik

IE Rob Firefox Chrome Safari Opera
Ne Ne 70+ Ne 12,1+ Vse
Vir: kanius
Android
Chrome
Android
Firefox

Brskalnik Android
iOS
Safari
Opera
Mini
Ne Ne Ne 12,2+ Da
Vir: kanius

text-underline-offset: odstotek

IE Rob Firefox Chrome Safari Opera
Ne Ne 74+ Ne Ne Ne
Vir: kanius
Android
Chrome
Android
Firefox

Brskalnik Android
iOS
Safari
Opera
Mini
Ne Ne Ne Ne Da
Vir: kanius