Odsadenie podčiarknutia textu - Triky CSS

text-underline-offsetNehnuteľnosť v CSS určuje vzdialenosť textu podčiarknutie zo svojej východiskovej polohy.

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

Keď na prvok použijete podčiarknutie text-decorations hodnotou podčiarknutia , pomocou vlastnosti môžete povedať, ako ďaleko by mal byť tento riadok od vášho textu text-underline-offset.

Hodnoty

• auto: (Predvolené) Prehliadač určí vhodné odsadenie podčiarknutí.
• : Akákoľvek platná dĺžka so zadanou jednotkou (vrátane záporných hodnôt). Toto nahradí všetky informácie vo fonte a predvolenom nastavení prehliadača.
• percentage: Určuje odsadenie podčiarknutí ako percento 1emu vo fonte prvku.
• initial: Predvolené nastavenie vlastnosti, ktoré je automatické.
• inherit: Prijme hodnotu posunu podčiarknutia nadradeného objektu.
• unset: Odstráni aktuálne posunutie od prvku.

Ukážka

V nasledujúcej ukážke môžete zmeniť hodnotu, text-underline-offsetaby ste videli, ako to ovplyvní textovú výzdobu prvku:

Poznámky

• text-underline-offset nie je súčasťou skratky z text-decoration.
• To nefunguje na iných text-decorationlinkách, ako je line-throughči overline.
• Záporné hodnoty sú akceptované, čo kompenzuje podčiarknutie smerom dovnútra.

Pre potomkov je konštantná

Akonáhle nastavíte dekoráciu prvku, budú mať túto dekoráciu aj všetky jeho deti. Teraz si predstavte, že chcete zmeniť posunutie podčiarknutia pre jedno z detí:

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

To nefunguje, pretože nemôžete prepísať posun podčiarknutia určeného prvkami predkov. Aby to fungovalo, musíte nastaviť špecifickosť podčiarknutia pre samotný prvok:

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

Odporúča sa používať em

Výhodou použitia relatívnej hodnoty ako em je, že posun sa bude zmenšovať so zmenou font-sizehodnoty. Na druhej strane, ak použijete jednotku s pevnou dĺžkou (napr. Pixely), posun sa neprispôsobí zmenám a nemusí to byť vzdialenosť, ktorú by ste chceli pre svoj text mať:

Percento a kaskáda

Pre túto vlastnosť bude dĺžka dediť ako pevná hodnota a nebude sa meniť s veľkosťou písma. Na druhej strane bude percento dediť ako relatívna hodnota, a preto bude zmenšované so zmenami písma, ktoré dedí.

Nasledujúca ukážka zobrazuje porovnanie medzi použitím em a percentuálnych hodnôt v prípade dedičstva a ako vidíte, na ľavej strane (v ktorej používame em) je zdedená hodnota pevnou dĺžkou. Vypočítanú hodnotu môžete skontrolovať vo svojom nástroji DevTools. To znamená, že sa nezmení so zmenou písma. Na pravej strane však texty dedia relatívnu hodnotu (v tomto prípade 100%); preto ofsetové mierky so zmenou písma:

Režimy písania a umiestnenie podčiarknutia textu

Vertikálny režim písania má vplyv na pozíciu podčiarknutia. To zmení smer odsadenia použitého na prvok. Hrajte s hodnotami v nasledujúcej ukážke:

Súvisiace

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

Viac informácií

Modul textových dekorácií CSS, úroveň 4 (návrh redaktora)

Podpora prehliadača

V čase písania tohto článku je Firefox jediným prehliadačom s plnou podporou. Safari nepodporuje percentuálne hodnoty.

odsadenie textu-podčiarknutia

IE	Hrana	Firefox	Chrome	Safari	Opera
Nie	Nie	70+	Nie	12,1+	Všetky

Android Chrome	Android Firefox	Prehliadač Android	iOS Safari	Opera Mini
Nie	Nie	Nie	12,2+	Áno

text-underline-offset: percentuálne

IE	Hrana	Firefox	Chrome	Safari	Opera
Nie	Nie	74+	Nie	Nie	Nie

Android Chrome	Android Firefox	Prehliadač Android	iOS Safari	Opera Mini
Nie	Nie	Nie	Nie	Áno