Teksts-pasvītrojums-nobīde - CSS-triki

text-underline-offsetĪpašums CSS nosaka attālumu teksta apakšsvītrām no to sākotnējā stāvoklī.

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

Kad elementam esat lietojis text-decorationpasvītrojumu , izmantojot ar pasvītrojuma vērtību, izmantojot text-underline-offsetīpašumu , varat pateikt, cik tālu šai līnijai jābūt no teksta .

Vērtības

• auto: (Noklusējums) Pārlūks norādīs pasvītrām atbilstošu nobīdi.
• : Jebkurš derīgs garums ar noteiktu vienību (ieskaitot negatīvās vērtības). Tas aizstāj visu fontu un pārlūka noklusējuma informāciju.
• percentage: Norāda pasvītrojuma nobīdi kā procentu no 1em elementa fontā.
• initial: Rekvizīta noklusējuma iestatījums, kas ir automātisks.
• inherit: Pieņem vecāka pasvītrojuma nobīdes vērtību.
• unset: Noņem pašreizējo nobīdi no elementa.

Demonstrācija

Šajā demonstrācijā varat mainīt vērtību, text-underline-offsetlai redzētu, kā tas ietekmē elementa teksta apdari:

Piezīmes

• text-underline-offset nav daļa no text-decoration.
• Tas nedarbojas citās text-decorationlīnijās, piemēram, line-throughvai overline.
• Tiek pieņemtas negatīvas vērtības, kas kompensē pasvītrojumu uz iekšu.

Pēcnācējiem tas ir nemainīgs

Kad esat iestatījis elementa rotājumu, arī visiem tā bērniem būs šī dekorācija. Tagad iedomājieties, ka vēlaties mainīt pasvītrojuma nobīdi vienam no bērniem:

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

Tas nedarbojas, jo jūs nevarat ignorēt senču elementu norādītā pasvītrojuma nobīdi. Lai tas darbotos, pašam elementam jāiestata pasvītrojuma specifika:

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

Ieteicams lietot em

Relatīvās vērtības, piemēram, em, izmantošanas priekšrocība ir tā, ka nobīde mainīsies, mainoties font-sizevērtībai. No otras puses, ja izmantojat fiksēta garuma vienību (piemēram, pikseļus), nobīde netiks pielāgota izmaiņām, un tas, iespējams, nav attālums, kādu vēlaties iegūt savam tekstam:

Procenti un kaskāde

Šim īpašumam garums tiks mantots kā fiksēta vērtība, un tas netiks mērogots ar fontu. No otras puses, procenti tiks mantoti kā relatīva vērtība, un tāpēc tie tiks mērogoti, mainoties fonta izmaiņām.

Šis demo parāda salīdzinājumu starp em un procentuālo vērtību izmantošanu mantojuma gadījumā, un, kā redzat, kreisajā pusē (kurā mēs izmantojam em) mantotā vērtība ir fiksēts garums. Aprēķināto vērtību varat pārbaudīt DevTools. Tas nozīmē, ka tas nav mērogojams ar fonta izmaiņām. Labajā pusē teksti tomēr pārņem relatīvu vērtību (šajā gadījumā 100%); tāpēc nobīde mērogojas ar fonta izmaiņām:

Rakstīšanas režīmi un teksta pasvītrojuma pozīcija

Vertikāla rakstīšanas režīma ietekme uz pasvītrojuma pozīciju. Tas mainīs elementam piemērotā nobīdes virzienu. Spēlējiet ar vērtībām šādā demonstrācijā:

Saistīts

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

Vairāk informācijas

CSS teksta apdares modulis 4. līmenis (redaktora melnraksts)

Pārlūkprogrammas atbalsts

Rakstīšanas laikā Firefox ir vienīgais pārlūks ar pilnu atbalstu. Safari neatbalsta procentuālās vērtības.

teksts-pasvītrojums-nobīde

IE	Mala	Firefox	Chrome	Safari	Opera
Nē	Nē	70+	Nē	12.1+	Viss

Android Chrome	Android Firefox	Android pārlūks	iOS Safari	Opera Mini
Nē	Nē	Nē	12.2+	Jā

text-underline-offset: procenti

IE	Mala	Firefox	Chrome	Safari	Opera
Nē	Nē	74+	Nē	Nē	Nē

Android Chrome	Android Firefox	Android pārlūks	iOS Safari	Opera Mini
Nē	Nē	Nē	Nē	Jā