Text-underline-offset - CSS-trikid

text-underline-offsetVara CSS määrab kaugus teksti rõhutab oma algasendisse.

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

Kui rakendate elemendile allajooni, kasutades text-decorationallakriipsutuse väärtust , saate text-underline-offsetatribuudi abil öelda, kui kaugel see rida peaks olema teie tekstist .

Väärtused

• auto: (Vaikimisi) Brauser määrab allajoonimiseks sobiva nihke.
• : Mis tahes kehtiv pikkus koos määratud ühikuga (sealhulgas negatiivsed väärtused). See asendab kogu fondis oleva teabe ja brauseri vaikeseaded.
• percentage: Määrab allajoonimise nihke protsendina 1em elemendi fondis.
• initial: Atribuudi vaikeseade, mis on automaatne.
• inherit: Võtab vastu vanema allajoonitud nihke väärtuse.
• unset: Eemaldab elemendilt praeguse nihke.

Demo

Järgmises demos saate muuta väärtust, text-underline-offsetet näha, kuidas see mõjutab elemendi teksti kaunistamist:

Märkused

• text-underline-offset ei ole osa stenogrammist text-decoration.
• See ei tööta teistel text-decorationliinidel, näiteks line-throughvõi overline.
• Negatiivseid väärtusi aktsepteeritakse, mis kompenseerib allajoonimise sissepoole.

Järeltulijate jaoks on see pidev

Kui olete elemendile kaunistuse määranud, on see kaunistus ka kõigil selle lastel. Kujutage nüüd ette, et soovite ühe lapse allakriipsutuse nihet muuta:

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

See ei toimi, kuna te ei saa eellastest elementidega määratud allakriipsutuse nihet tühistada. Selle toimimiseks peate elemendi enda jaoks määrama joone spetsiifilisuse:

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

Em on soovitatav kasutada

Sellise suhtelise väärtuse kasutamise eeliseks on see, et nihe suureneb koos font-sizeväärtuse muutumisega . Teiselt poolt, kui kasutate fikseeritud pikkuse ühikut (nt piksleid), siis nihe ei muutu muudatustega ja see ei pruugi olla kaugus, mida soovite oma teksti jaoks teha:

Protsent ja kaskaad

Selle atribuudi puhul pärandub pikkus fikseeritud väärtusena ja seda ei muudeta fondiga. Teisest küljest pärib protsent suhtelise väärtusena ja seetõttu skaala muutub koos fondi muutustega selle pärimisel.

Järgmine demo näitab võrdlust em ja protsentväärtuste vahel pärimise korral ja nagu näete, vasakul küljel (milles me emi kasutame) on päritud väärtus fikseeritud pikkusega. Arvutatud väärtust saate kontrollida oma DevTools'is. See tähendab, et see ei muutu fondi muutumisega. Paremal küljel pärivad tekstid siiski suhtelise väärtuse (antud juhul 100%); seetõttu kompenseeritakse skaala koos fondi muutusega:

Kirjutamisrežiimid ja teksti allakriipsutamine-positsioon

Vertikaalse kirjutamisrežiimi omamine mõjutab allakriipsutuse positsiooni. See muudab elemendile rakendatava nihke suunda. Mängige järgmise demo väärtustega:

Seotud

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

Rohkem informatsiooni

CSS-i teksti kaunistamise moodul, tase 4 (toimetaja mustand)

Brauseri tugi

Selle kirjutamise ajal on Firefox ainus brauser, millel on täielik tugi. Safari ei toeta protsendiväärtusi.

text-underline-offset

IE	Edge	Firefox	Chrome	Safari	Ooper
Ei	Ei	70+	Ei	12,1+	Kõik

Android Chrome	Android Firefox	Androidi brauser	iOS-i Safari	Opera Mini
Ei	Ei	Ei	12,2+	Jah

text-underline-offset: protsent

IE	Edge	Firefox	Chrome	Safari	Ooper
Ei	Ei	74+	Ei	Ei	Ei

Android Chrome	Android Firefox	Androidi brauser	iOS-i Safari	Opera Mini
Ei	Ei	Ei	Ei	Jah