De text-decoration-skipegenskapen anger där en text understrykning, överlinje, eller genomslag skulle gå sönder. Detta förbättrar läsbarheten för dekorerad text och korrigerar skiljetecken för vissa språk.
Här är ett exempel:
a ( text-decoration-skip: ink; )Se upp! Det inkvärdet har ändrats till en helt ny egenskap, text-decoration-skip-ink: auto;.
Om din webbläsare stöder den här egenskapen märker du här att nedstigningarna för varje tecken (som “y” och “p”) har små vita mellanrum runt gränsen:
Se Penns text-dekorationshopp av CSS-Tricks (@ css-tricks) på CodePen.
Om din webbläsare inte stöder den här funktionen är det här du borde förvänta dig av fastigheten i en webbläsare som stödjer:
text-decoration-skip i OSX och iOS
I slutet av 2014 gjorde Apple en förändring text-decorationi Safari och iOS-webbläsare som efterliknar hur det text-decoration-skip: ink;ska fungera. Även om inget av text-decoration-skipvärdena är officiellt implementerade ännu kan du inaktivera detta standardbeteende med -webkit-text-decoration-skip: none;.
Se pennan -webkit-text-dekoration-hoppa: ingen; av CSS-Tricks (@ css-tricks) på CodePen.
Relaterad
text-decorationtext-decoration-colortext-decoration-linetext-decoration-style
Mer information
- CSS Text Decoration Module Level 4
Editor's Draft text-decoration-skipvid MSDN.- Diskussion om att lägga till
trailing-spacessom ett värde från W3C-e-postlistan. - Förbättrad textläsbarhet för dyslexikanvändare med understrykningar med hopp över bläck
- text-dekoration-hoppa över MDN
- text-dekoration-hoppa över bläck på MDN
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 * |