w3docs logo

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

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

Свойство text-decoration-skip-ink имеет эффект, когда text-decoration-line установлено как "underline" и"overline" . "Line-through" не подвергается влиянию.
Значение по умолчанию auto
Применяется Ко всем элементам.
Наследуется Да
Анимируемое Нет
Версия CSS4
DOM синтаксис object.style.textDecorationSkipInk = "none";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <h3>Text-decoration-skip-ink: none;</h3>
    <p class="ex1">Lorem Ipsum - это текст-"рыба"</p>
    <h3>Text-decoration-skip-ink:auto;</h3>
    <p class="ex2">Lorem Ipsum - это текст-"рыба"</p>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
64.0+ ✕ ✕ 50.0+

Практикуйте свои знания

What does the CSS property 'text-decoration-skip-ink' do?
Считаете ли это полезным?