Text-underline-offset - CSS-gudrybės

text-underline-offsetCSS nuosavybė nustato, kad pabrėžiama, atstumą nuo savo pradinę padėtį.

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

Kai taikote pabraukimo už elemento naudojant text-decorationsu pabraukti vertės , galite pasakyti, kiek ta eilutė turėtų būti iš teksto naudojant text-underline-offsetturtą.

Vertybės

• auto: (Numatytasis) Naršyklė nurodys tinkamą poslinkių poslinkį.
• : Bet koks galiojantis ilgis su nurodytu vienetu (įskaitant neigiamas vertes). Tai pakeičia bet kokią šrifto informaciją ir numatytąją naršyklės informaciją.
• percentage: Nurodo pabraukimo poslinkį kaip 1em procentą elemento šrifte.
• initial: Numatytasis ypatybės nustatymas, kuris yra automatinis.
• inherit: Priima tėvų pabraukimo poslinkio vertę.
• unset: Pašalina dabartinį poslinkį iš elemento.

Demonstracija

Šioje demonstracijoje galite pakeisti reikšmę, text-underline-offsetkad pamatytumėte, kaip tai veikia elemento teksto apdailą:

Pastabos

• text-underline-offset nėra dalis sutrumpinta text-decoration.
• Jis neveikia kitose text-decorationlinijose, tokiose kaip line-througharba overline.
• Priimamos neigiamos vertės, o tai kompensuoja pabraukimą į vidų.

Palikuonims jis yra pastovus

Kai nustatysite elemento dekoraciją, visi jo vaikai taip pat turės tą dekoraciją. Dabar įsivaizduokite, kad norite pakeisti pabraukimo poslinkį vienam iš vaikų:

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

Tai neveikia, nes jūs negalite nepaisyti protėvių elementų nurodyto pabraukimo poslinkio. Kad tai veiktų, turite nustatyti paties elemento pabraukimo specifiškumą:

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

Rekomenduojama naudoti em

Tokios santykinės vertės kaip em naudojimas yra tas, kad poslinkis bus keičiamas keičiantis font-sizevertei. Kita vertus, jei naudojate fiksuoto ilgio vienetą (pvz., Pikselius), poslinkis nebus pritaikytas pokyčiams ir tai gali būti ne tas atstumas, kokio norėtumėte turėti savo tekstui:

Procentai ir kaskada

Šios ypatybės ilgis paveldės kaip fiksuotą vertę ir nebus keičiamas šriftu. Kita vertus, procentas paveldės kaip santykinę vertę, todėl, atsižvelgiant į paveldimą šriftą, jis bus keičiamas.

Toliau pateiktoje demonstracijoje parodytas palyginimas tarp em ir procentinių verčių naudojimo paveldėjimo atveju, o, kaip matote, kairėje pusėje (kurioje mes naudojame em) paveldima vertė yra fiksuoto ilgio. Apskaičiuotą vertę galite patikrinti savo „DevTools“. Tai reiškia, kad jis nesikeičia keičiant šriftą. Dešinėje pusėje tekstai paveldi santykinę vertę (šiuo atveju 100%); todėl poslinkis keičiasi keičiant šriftą:

Rašymo režimai ir teksto pabraukimo pozicija

Vertikalaus rašymo režimas turi įtakos pabraukimo padėčiai. Tai pakeis elementui taikomo poslinkio kryptį. Žaisk su šio demonstracinio elemento vertėmis:

Susijęs

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

Daugiau informacijos

4 lygio CSS teksto dekoravimo modulis (redaktoriaus juodraštis)

Naršyklės palaikymas

Šiuo metu „Firefox“ yra vienintelė naršyklė, palaikanti visišką palaikymą. „Safari“ nepalaiko procentinių verčių.

text-underline-offset

T.Y	Briauna	„Firefox“	„Chrome“	„Safari“	Opera
Ne	Ne	70 ir daugiau	Ne	12.1+	Viskas

„Android Chrome“	„Android Firefox“	„Android“ naršyklė	„iOS Safari“	„Opera Mini“
Ne	Ne	Ne	12.2+	Taip

text-underline-offset: procentas

T.Y	Briauna	„Firefox“	„Chrome“	„Safari“	Opera
Ne	Ne	74+	Ne	Ne	Ne

„Android Chrome“	„Android Firefox“	„Android“ naršyklė	„iOS Safari“	„Opera Mini“
Ne	Ne	Ne	Ne	Taip