MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

text-decoration-skip

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Описание

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.

Начальное значениеobjects
Применяется квсе элементы
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокпорядок появления в формальной грамматике значений

Синтаксис

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

Значения

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 or word-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.
An example of "text-decoration-skip: ink;".
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.)
An example of "text-decoration-skip: edges;".
box-decoration
The text decoration is skips 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.

Formal Syntax

none | [ objects || spaces || ink || edges || box-decoration ]

Примеры

HTML разметка

<p>Hey, grap a cup of coffee!</p>

CSS стили

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

Результат

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

Specification Status Comment
CSS Text Decoration Level 3
Определение 'text-decoration-skip' в этой спецификации.
Кандидат в рекомендации Initial definition

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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support Нет[1] Нет[3] Нет[2] Нет Нет[1] Нет[4]
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Нет[1] Нет[1] Нет[2] Нет Нет[1] Нет[4]

[1] This feature is not implemented yet. See Баг Chromium 477917.

[2] This feature is not implemented yet. See баг 812990.

[3] This feature is not implemented yet. See the related request.

[4] 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.

Метки документа и участники

 Внесли вклад в эту страницу: VladimirSchneider
 Обновлялась последний раз: VladimirSchneider,