CSS-свойство `text-decoration-skip-ink`

text-decoration-skip-ink — это свойство CSS, которое определяет, как отображаются надчёркивания и подчёркивания при пересечении с верхними и нижними выносными элементами глифов.

text-decoration-skip-ink не входит в сокращённое свойство text-decoration.

Попробуйте

text-decoration-skip-ink: auto;

text-decoration-skip-ink: none;

<section id="default-example">
  <p>
    <span class="transition-all" id="example-element">parapsychologists</span>
  </p>
</section>

p {
  font:
    1.9em "Georgia",
    serif;
  text-decoration: underline;
}

Синтаксис

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/* Global keywords */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

none

Подчёркивания и надчёркивания проводятся по всей длине текстового содержимого, включая участки, пересекающиеся с нижними и верхними выносными элементами глифов.

auto

Значение по умолчанию — браузер может прерывать подчёркивания и надчёркивания, чтобы они не касались глифа и не проходили слишком близко к нему. Иными словами, линии прерываются в местах, где иначе пересекались бы с глифом.

all

Браузер должен прерывать подчёркивания и надчёркивания, чтобы они не касались глифа и не проходили слишком близко к нему. Это может быть полезно для некоторых китайских, японских и корейских (CJK) шрифтов, в которых поведение auto может не приводить к прерыванию линий.

Формальное определение

Формальный синтаксис

text-decoration-skip-ink = 
  auto |
  all |
  none

Примеры

HTML

<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
  この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>

CSS

p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• text-decoration
• text-decoration-skip