Text-decoration-skip-ink - CSS-трикове

Anonim

text-decoration-skip-inkе свойство, което контролира поведението на underlineи overline(но не line-through), когато линията преминава през част от символ / глиф. Това ви дава прецизно настроен контрол върху начина, по който подчертаванията или открояванията взаимодействат с символите, които се простират над горната част или висят под долната част на ред.

По-рано това се обработваше чрез text-decoration-skip: ink;комбинацията свойство / стойност, но след дискусии за това как да се справите с проблема с каскадни стилове неволно презаписване на стилове с по-нисък приоритет (поради броя на наличните опции text-decoration-skip), отделните свойства ще бъдат разделени на нови свойства подобно на text-decoration-skip-ink. За повече контекст и примери защо това е променено, вижте тази дискусия на GitHub и протоколите на CSS на работната група, обсъждащи свойствата.

По подразбиране браузърите ще „пропускат“ области, където „мастилото“ на даден символ пресича подчертаване, така:

Можете да промените това поведение, за да принудите подчертаването / надреждането да премине през символа, като зададете text-decoration-skip-inkна none.

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

Това води до пресичане на линията точно през символите:

Синтаксис

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

Стойности

text-decoration-skip-ink приема следните стойности:

  • auto е стойността по подразбиране и ще „пропусне“ подчертаванията / надчертанията при преминаване през символ.
  • none ще намали това подчертаване / надреждане точно през вашите висящи y и високи t.

Пример

Вижте примера на Pen text-decoration-skip-ink
от CSS-Tricks (@ css-tricks) на CodePen.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
91 87 Не 88 TP

Мобилен / таблет

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

Свързани

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

Ресурси

  • MDN документация
  • Подчертаване на стила в мрежата
  • Потребители с дислексия и подчертани мастила