text-underline-offset
Hotel 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-decoration
vrednost podčrtaja , lahko z text-underline-offset
lastnostjo 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-offset
da vidite, kako vpliva na besedilno dekoracijo elementa:
Opombe
text-underline-offset
ni del okrajšavetext-decoration
.- Na drugih progah ne deluje, na
text-decoration
primerline-through
ozoverline
. - 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-size
vrednosti. 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 |
Android Chrome | Android Firefox | Brskalnik Android | iOS Safari | Opera Mini |
---|---|---|---|---|
Ne | Ne | Ne | 12,2+ | Da |
text-underline-offset: odstotek
IE | Rob | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
Ne | Ne | 74+ | Ne | Ne | Ne |
Android Chrome | Android Firefox | Brskalnik Android | iOS Safari | Opera Mini |
---|---|---|---|---|
Ne | Ne | Ne | Ne | Da |