The text-decoration-skip
CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.
/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: ink;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;
/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: ink edges box-decoration;
/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;
Начальное значение | objects |
---|---|
Применяется к | все элементы |
Наследуется | да |
Отображение | визуальный |
Обработка значения | как указано |
Animation type | discrete |
Канонический порядок | порядок появления в формальной грамматике значений |
Синтаксис
Значения
none
- Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes.
objects
- The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.
spaces
- All spacing is skipped, i.e. all Unicode white space characters and all word separators, plus any adjacent
letter-spacing
orword-spacing
. ink
- The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.
edges
- The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)
box-decoration
- The text decoration is skipped over the box's margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.
Формальный синтаксис
Примеры
HTML content
<p>Hey, grab a cup of coffee!</p>
CSS content
p {
margin: 0;
font-size: 3em;
text-decoration: underline;
text-decoration-skip: ink;
}
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Text Decoration Module Level 3 Определение 'text-decoration-skip' в этой спецификации. |
Кандидат в рекомендации | Initial definition |
Поддержка браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57 | Нет[2] | Нет[1] | Нет | 44 | Нет[3] |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 57 | 57 | Нет[1] | Нет | 44 | Нет[3] |
[1] This feature is not implemented yet. See баг 812990.
[2] This feature is not implemented yet. See the related request.
[3] Safari implements a -webkit prefixed version of this property since version 8, though only supports the value none
and the non-standard value skip
. All other values behave like those two values.