Text-understrykning-offset - CSS-tricks

Den text-underline-offsetegendom i CSS sätter avståndet text understrykningar från sitt utgångsläge.

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

När du väl har använt en understrykning för ett element som använder text-decorationmed värdet för understrykning kan du säga hur långt raden ska vara från din text med hjälp av text-underline-offsetegenskapen.

Värden

• auto: (Standard) Webbläsaren anger en lämplig förskjutning för understrykningar.
• : Valfri längd med en specificerad enhet (inklusive negativa värden). Detta ersätter all information i teckensnittet och webbläsarens standard.
• percentage: Anger förskjutningen av understrykningar i procent av 1 em i elementets teckensnitt.
• initial: Egenskapens standardinställning, som är auto.
• inherit: Antar det överordnade offsetvärdet för föräldern.
• unset: Tar bort den aktuella förskjutningen från elementet.

Demo

I följande demo kan du ändra värdet på för text-underline-offsetatt se hur det påverkar elementets textdekoration:

Anteckningar

• text-underline-offset är inte en del av förkortningen av text-decoration.
• Det fungerar inte på andra text-decorationrader, som line-througheller overline.
• Negativa värden accepteras, vilket kompenserar understrykningen inåt.

Det är konstant för ättlingarna

När du väl har satt in en dekoration för ett element kommer alla dess barn att ha den dekorationen också. Föreställ dig nu att du vill ändra förskjutningen av understrykningen för ett av barnen:

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

Detta fungerar inte eftersom du inte kan åsidosätta en förskjutning av en understrykning som anges av förfäderelement. För att detta ska fungera måste du ställa in en understrykningsspecificitet för själva elementet:

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

Användning av dem rekommenderas

Fördelen med att använda ett relativt värde som em är att förskjutningen skalas med förändringen av font-sizevärdet. Å andra sidan, om du använder en enhet med fast längd (t.ex. pixlar), kommer förskjutningen inte att anpassas till ändringarna och det kanske inte är det avstånd du vill ha för din text:

Procentandel och kaskad

För den här egenskapen ärver en längd som ett fast värde och skalas inte med teckensnittet. Å andra sidan kommer en procentsats att ärva som ett relativt värde och därför skalas med ändringar i teckensnittet när det ärver.

Följande demo visar jämförelsen mellan att använda em och procentvärden i fall av arv och, som du kan se, på vänster sida (där vi använder em) är det ärvda värdet en fast längd. Du kan kontrollera det beräknade värdet i dina DevTools. Det betyder att den inte skala med förändringen i teckensnittet. På höger sida ärver dock texterna ett relativt värde (i detta fall 100%); därför skalas förskjutningen med teckensnittsändringen:

Skrivlägen och text-understrykningsposition

Att ha ett vertikalt skrivläge har en effekt på understrykningens position. Det kommer att ändra riktningen för förskjutningen som appliceras på elementet. Spela med värdena i följande demo:

Relaterad

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

Mer information

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

Webbläsarstöd

När detta skrivs är Firefox den enda webbläsaren med fullt stöd. Safari stöder inte procentvärden.

text-understrykning-offset

IE	Kant	Firefox	Krom	Safari	Opera
Nej	Nej	70+	Nej	12.1+	Allt

Android Chrome	Android Firefox	Android- webbläsare	iOS Safari	Opera Mini
Nej	Nej	Nej	12.2+	Ja

text-understrykning-offset: procent

IE	Kant	Firefox	Krom	Safari	Opera
Nej	Nej	74+	Nej	Nej	Nej

Android Chrome	Android Firefox	Android- webbläsare	iOS Safari	Opera Mini
Nej	Nej	Nej	Nej	Ja