text-decoration-skip

Экспериментально: Это экспериментальная технология .
Перед использованием в продакшене тщательно изучите таблицу совместимости с браузерами.

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

Примечание: Большинство других браузеров сходятся в поддержке более простого свойства text-decoration-skip-ink.

Синтаксис

/* 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

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

spaces

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

leading-spaces

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

trailing-spaces

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

edges

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

An example of "text-decoration-skip: edges;".

box-decoration

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

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

Начальное значение	`objects`
Применяется к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

text-decoration-skip = 
  none  |
  auto

Примеры

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

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;
}

Результат

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

Спецификация
CSS Текстовый модуль декораций уровня 4 # text-decoration-skipping

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`text-decoration-skip`	57–64 Поддерживает только устаревшее значение `ink`.	Нет	Нет	44–50 Поддерживает только устаревшее значение `ink`.	12.1 Поддерживает только значения `none`, `auto`, и `objects`. 7 Поддерживает только значения `none`, `auto`, и `objects`.	57–64 Поддерживает только устаревшее значение `ink`.	Нет	43–46 Поддерживает только устаревшее значение `ink`.	12.2 Поддерживает только значения `none`, `auto`, и `objects`. 7 Поддерживает только значения `none`, `auto`, и `objects`.	7.0–9.0 Поддерживает только устаревшее значение `ink`.	57–64 Поддерживает только устаревшее значение `ink`.
`auto`	Нет	Нет	Нет	Нет	≤13.1	Нет	Нет	Нет	≤13.4	Нет	Нет
`none`	Нет	Нет	Нет	Нет	≤13.1	Нет	Нет	Нет	≤13.4	Нет	Нет

См. также

text-decoration-skip-ink

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip