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

Свойство text-decoration-skip указывает, какие части содержимого элемента должны быть пропущены при наложении декоративных линий текста.

Оно управляет всеми линиями декоративного оформления текста, которые рисуются элементом и его предками. В отличие от text-decoration-skip-ink, который воздействует только на чернила, перекрывающие текст, это свойство пыталось пропускать декоративные линии над пробелами и заменёнными элементами, но в итоге было удалено из спецификации.

DANGER

Значение "ink" было перенесено в свойство text-decoration-skip-ink.

note
Это свойство устарело и имеет очень ограниченную поддержку в браузерах. Вместо него рекомендуется использовать text-decoration-skip-ink.

Начальное значение	none
Применяется ко	Всем элементам.
Наследуется	Да.
Анимация	Нет.
Версия	Черновик (Устаревшее)
Синтаксис DOM	object.style.textDecorationSkip = "spaces";

Синтаксис

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

css

text-decoration-skip: none | objects | spaces | leading spaces | trailing spaces | edges | box-decoration;

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin: 1em;
        color: #ccc;
        font-size: 2em;
        text-decoration: underline;
        text-decoration-skip: edges;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-skip property example</h2>
    <p>
      <em>Lorem,</em>
      <em>ipsum is simply dummy text</em>
    </p>
  </body>
</html>

Try it Yourself »

Результат

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

note
Это свойство устарело и не поддерживается в современных браузерах. Пример не отобразит никаких визуальных изменений.

Значения

Значение	Описание
none	Пропуск не применяется. Таким образом, декоративное оформление рисуется для всего текстового содержимого.
objects	Пропускает декоративные линии над заменёнными элементами (например, изображениями) или блочно-строчными элементами.
spaces	Пропускаются все пробелы.
leading spaces	Пропускаются начальные пробелы (типографские символы, разделители слов, межбуквенный или межсловный интервал).
trailing spaces	Пропускаются конечные пробелы (типографские символы, разделители слов, межбуквенный или межсловный интервал).
edges	Начало и конец декоративного оформления немного смещаются внутрь от края содержимого декорирующего блока.
box-decoration	Пропускаются области поля, границы и отступов блока.

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

Браузер	Поддержка
Chrome	Никогда не реализовано
Firefox	Никогда не реализовано
Safari	Никогда не реализовано
Edge	Никогда не реализовано
Opera	Никогда не реализовано

Практика

В чём заключается функция свойства 'text-decoration-skip' в CSS?

Оно указывает, следует ли прерывать линии декоративного оформления над или под текстом.Оно указывает, рисуется ли линия декоративного оформления текста сквозь сам текст и как именно.Оно указывает, на каких частях content-box элемента рисуются линии декоративного оформления; в основном используется для установки значений 'none', 'objects', 'spaces', 'ink', 'edges', 'box-decoration' и 'leading-spaces'.Оно указывает, как разбивать строку текста на несколько строк.Оно управляет смещением тени относительно текста.Оно указывает, пропускается ли линия декоративного оформления текста над значениями 'none', 'objects', 'spaces', 'ink', 'edges', 'box-decoration' и 'leading-spaces' и как именно.

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

Синтаксис ​

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

Результат ​

Значения ​

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