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

Свойство text-decoration-skip-ink определяет, как рисуются подчёркивания и надчёркивания при пересечении с глифом.

INFO

Свойство text-decoration-skip-ink действует, когда свойство text-decoration-line установлено в значения «underline» или «overline». Значение «line-through» не затрагивается.

Начальное значение	auto
Применяется ко	Всем элементам.
Наследуется	Да.
Анимируется	Нет.
Версия	CSS Text Decoration Module Level 4
Синтаксис DOM	object.style.textDecorationSkipInk = "none";

Синтаксис

Значения CSS text-decoration-skip-ink

css

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

Пример свойства text-decoration-skip-ink:

Пример кода CSS text-decoration-skip-ink

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .ex1 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: none;
      }
      .ex2 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: auto;
      }
    </style>
  </head>
  <body>
    <h2>
        Text-decoration-skip-ink property example
    </h2>
    <h3>
        Text-decoration-skip-ink: none;
    </h3>
    <p class="ex1">
      Lorem ipsum is simply dummy text
    </p>
    <h3>
        Text-decoration-skip-ink:auto;
    </h3>
    <p class="ex2">
      Lorem ipsum is simply dummy text
    </p>
  </body>
</html>

Try it Yourself »

Результат

Список значений CSS text-decoration-skip-ink

Значения

Значение	Описание
auto	Подчёркивания и надчёркивания рисуются только в тех местах, где они не касаются глифа и не подходят к нему близко. Это значение по умолчанию для данного свойства.
none	Подчёркивания и надчёркивания рисуются для всего текстового содержимого, включая части, пересекающие нисходящие и восходящие элементы глифов.
initial	Устанавливает свойству значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что делает CSS-свойство 'text-decoration-skip-ink'?

Оно заставляет текст подчёркиваться без пропуска каких-либо символов.Оно заставляет подчёркивание обходить нисходящие элементы.Оно меняет цвет подчёркивания на тот же, что и цвет ссылки.Оно изменяет стиль подчёркивания на точечный, пунктирный или сплошной.Оно автоматически применяет подчёркивание к тексту.Оно может предотвратить пересечение подчёркивания с глифами.

Свойство CSS text-decoration-skip-ink ​

Синтаксис ​

Пример свойства text-decoration-skip-ink: ​

Результат ​