Tekst-understreking-forskyvning - CSS-triks

Den text-underline-offsetegenskap i CSS angir avstanden av tekstunderstrekninger fra sin opprinnelige posisjon.

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

Når du bruker en understreking for et element som bruker text-decorationmed verdien av understrekingen , kan du si hvor langt linjen skal være fra teksten din ved hjelp av text-underline-offseteiendommen.

Verdier

• auto: (Standard) Nettleseren vil spesifisere en passende forskyvning for understrekninger.
• : Enhver gyldig lengde med en spesifisert enhet (inkludert negative verdier). Dette erstatter all informasjon i skriften og nettleserens standard.
• percentage: Spesifiserer forskyvning av understrekninger som en prosentandel av 1 em i elementets font.
• initial: Standardinnstillingen for eiendommen, som er automatisk.
• inherit: Vedtar understreket forskyvningsverdi for foreldrene.
• unset: Fjerner gjeldende forskyvning fra elementet.

Demo

I følgende demo kan du endre verdien på for text-underline-offsetå se hvordan det påvirker tekstdekorasjonen til elementet:

Merknader

• text-underline-offset er ikke en del av stenografien av text-decoration.
• Det fungerer ikke på andre text-decorationlinjer, som line-througheller overline.
• Negative verdier aksepteres, noe som motvirker understrekningen innover.

Det er konstant for etterkommerne

Når du har satt inn en dekorasjon for et element, vil alle barna også ha den dekorasjonen. Tenk deg at du vil endre forskyvningen av understreken for et av barna:

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

Dette fungerer ikke fordi du ikke kan overstyre en forskyvning av en understreking spesifisert av forfedreelementer. For at dette skal fungere, må du sette en understreket spesifisitet for selve elementet:

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

Det anbefales å bruke dem

Fordelen med å bruke en relativ verdi som em er at forskyvningen skaleres med endringen av font-sizeverdien. På den annen side, hvis du bruker en enhet med fast lengde (f.eks. Piksler), vil ikke forskyvningen tilpasse seg endringene, og det kan hende det ikke er avstanden du vil ha for teksten din:

Prosentandel og kaskade

For denne egenskapen vil en lengde arve som en fast verdi, og skaleres ikke med skriften. På den annen side vil en prosentandel arve som en relativ verdi og derfor skalere med endringer i skriften når den arver.

Følgende demo viser sammenligningen mellom å bruke em og prosentverdier i tilfelle arv, og som du kan se, på venstre side (der vi bruker dem), er den arvede verdien en fast lengde. Du kan sjekke den beregnede verdien i DevTools. Det betyr at den ikke skalerer med endringen i skrift. På høyre side arver imidlertid tekstene en relativ verdi (i dette tilfellet 100%); derfor skaleres forskyvningen med endringen i skrifttypen:

Skrivemodus og tekst-understrek-posisjon

Å ha en vertikal skrivemodus har en innvirkning på understrekingens posisjon. Dette vil endre retningen til forskyvningen som brukes på elementet. Spill med verdiene i følgende demo:

I slekt

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

Mer informasjon

CSS Text Decoration Module Level 4 (Editor's Draft)

Nettleserstøtte

I skrivende stund er Firefox den eneste nettleseren med full støtte. Safari støtter ikke prosentverdier.

tekst-understreking-forskyvning

DVS	Kant	Firefox	Chrome	Safari	Opera
Nei	Nei	70+	Nei	12.1+	Alle

Android Chrome	Android Firefox	Android- nettleser	iOS Safari	Opera Mini
Nei	Nei	Nei	12.2+	Ja

tekst-understreking-forskyvning: prosent

DVS	Kant	Firefox	Chrome	Safari	Opera
Nei	Nei	74+	Nei	Nei	Nei

Android Chrome	Android Firefox	Android- nettleser	iOS Safari	Opera Mini
Nei	Nei	Nei	Nei	Ja