Text-dekoration-hoppa över bläck - CSS-tricks

Anonim

text-decoration-skip-inkär en egenskap som styr beteendet hos underlineoch overline(men inte line-through) när raden passerar genom en del av ett tecken / tecken. Detta ger dig finjusterad kontroll över hur understrykningar eller överstreck interagerar med tecknen som sträcker sig över toppen eller hänger under botten av en rad.

Tidigare hanterades detta via text-decoration-skip: ink;egenskapen / värdekombinationen, men efter diskussioner om hur man hanterar problemet med kaskadstilar oavsiktligt skrivande av lägre prioritetsstilar (på grund av antalet tillgängliga alternativ text-decoration-skip) kommer de enskilda egenskaperna att delas upp i nya egenskaper liknar text-decoration-skip-ink. För mer sammanhang och exempel på varför detta ändrades, se denna GitHub-diskussion och CSS-arbetsgruppens protokoll som diskuterar egenskaperna.

Som standard kommer webbläsare att "hoppa över" områden där "bläck" i ett tecken korsar en understrykning, så här:

Du kan ändra detta beteende för att tvinga understrykningen / överlinjen att gå igenom karaktären genom att ställa in text-decoration-skip-inktill none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Detta resulterar i att raden skär genom tecknen:

Syntax

text-decoration-skip-ink: auto | none;

Värden

text-decoration-skip-ink accepterar följande värden:

  • auto är standardvärdet och kommer att "hoppa över" understrykningar / överlinjer när de passerar ett tecken.
  • none kommer att klippa den understrukna / överlinjen rakt igenom dina dinglande y-tal och höga t-tal.

Exempel

Se exempel på penna-text-dekoration-hoppa över bläck
av CSS-Tricks (@ css-tricks) på CodePen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
91 87 Nej 88 TP

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

Relaterad

  • text-decoration-skip
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Resurser

  • MDN-dokumentation
  • Styling understryker på webben
  • Dyslexikanvändare och understrykning med överbläck