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

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

Синтаксис

/* Keyword values */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

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

Значения

none

Ничего не пропускается. Таким образом, текстовое оформление рисуется для всего текстового содержимого и поверх атомарных строчно-блочных боксов.

objects

Весь внешний отступ элемента пропускается, если элемент является атомарным строчным элементом, например изображением или строчно-блочным элементом.

spaces

Пропускаются все пробелы: все символы пробелов Unicode и все разделители слов, а также любые соседние значения letter-spacing или word-spacing.

leading-spaces

То же, что и spaces, но пропускаются только начальные пробелы.

trailing-spaces

То же, что и spaces, но пропускаются только конечные пробелы.

edges

Начало и конец текстового оформления немного отступают (например, на половину толщины линии) от края содержимого оформляющего блока. Таким образом, соседние элементы получают отдельные подчёркивания. (Это важно для китайского языка, где подчёркивание является формой пунктуации.)

box-decoration

Текстовое оформление пропускает области внешнего отступа, границы и внутреннего отступа блока. Это влияет только на оформление, заданное предком; оформляющий блок никогда не рисует текстовое оформление поверх собственного оформления блока.

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

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

text-decoration-skip = 
  none |
  [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

Примеры

Пропуск краёв

HTML

<p>Hey, grab a cup of <em>coffee!</em></p>

CSS

p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}

Результат

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

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

См. также

• text-decoration-skip-ink