Tekst-understregning-offset - CSS-tricks

Den text-underline-offsetejendom i CSS angiver distancen af tekst understregninger fra deres oprindelige position.

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

Når du først har anvendt en understregning for et element ved hjælp text-decorationaf værdien af ​​understregning , kan du sige, hvor langt denne linje skal være fra din tekst ved hjælp af text-underline-offsetegenskaben.

Værdier

• auto: (Standard) Browseren angiver en passende forskydning til understregninger.
• : Enhver gyldig længde med en specificeret enhed (inklusive negative værdier). Dette erstatter alle oplysninger i skrifttypen og browserens standard.
• percentage: Angiver forskydningen af ​​understregninger som en procentdel af 1 em i elementets skrifttype.
• initial: Ejendommens standardindstilling, som er automatisk.
• inherit: Vedtager den overordnede forskudte værdi for forældrene.
• unset: Fjerner den aktuelle forskydning fra elementet.

Demo

I den følgende demo kan du ændre værdien af ​​for text-underline-offsetat se, hvordan det påvirker elementets tekstdekoration:

Bemærkninger

• text-underline-offset er ikke en del af stenografi af text-decoration.
• Det virker ikke på andre text-decorationlinjer, såsom line-througheller overline.
• Negative værdier accepteres, hvilket udligner understregningen indad.

Det er konstant for efterkommerne

Når du har indstillet en dekoration til et element, vil alle dets børn også have den dekoration. Forestil dig nu, at du vil ændre forskydningen af ​​understregningen for et af børnene:

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 tilsidesætte en forskydning af en understregning, der er angivet af forfædreelementer. For at dette skal fungere, skal du indstille en understreget specificitet 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 at bruge dem

Fordelen ved at bruge en relativ værdi som em er, at forskydningen skaleres med ændringen af font-sizeværdien. På den anden side, hvis du bruger en enhed med fast længde (f.eks. Pixels), justeres forskydningen ikke til ændringerne, og det er muligvis ikke den afstand, du gerne vil have til din tekst:

Procentdel og kaskade

For denne egenskab arver en længde som en fast værdi og skaleres ikke med skrifttypen. På den anden side arver en procentdel som en relativ værdi og skaleres derfor med ændringer i skrifttypen, når den arver.

Den følgende demo viser sammenligningen mellem at bruge em og procentværdier i tilfælde af arv, og som du kan se, på venstre side (hvor vi bruger em), er den arvede værdi en fast længde. Du kan kontrollere den beregnede værdi i dine DevTools. Det betyder, at det ikke skaleres med ændringen i skrifttypen. På højre side arver imidlertid teksterne en relativ værdi (i dette tilfælde 100%); derfor skalerer forskydningen sig med ændringen i skrifttypen:

Skrivemetoder og tekst-understregning-position

At have en lodret skrivetilstand har en indvirkning på placeringen af ​​understregningen. Det vil ændre retningen for forskydningen, der anvendes på elementet. Spil med værdierne i følgende demo:

Relaterede

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

Mere information

CSS Tekstdekorationsmodul Niveau 4 (Editorens kladde)

Browsersupport

På dette tidspunkt er Firefox den eneste browser med fuld support. Safari understøtter ikke procentværdier.

tekst-understregning-offset

IE	Edge	Firefox	Chrome	Safari	Opera
Ingen	Ingen	70+	Ingen	12.1+	Alle

Android Chrome	Android Firefox	Android- browser	iOS Safari	Opera Mini
Ingen	Ingen	Ingen	12.2+	Ja

tekst-understregning-offset: procent

IE	Edge	Firefox	Chrome	Safari	Opera
Ingen	Ingen	74+	Ingen	Ingen	Ingen

Android Chrome	Android Firefox	Android- browser	iOS Safari	Opera Mini
Ingen	Ingen	Ingen	Ingen	Ja