Свойство text-decoration-skip-ink указывает, как отображаются линии под/над текстом, когда они пересекают глифы.
Свойство text-decoration-skip-ink имеет эффект, когда text-decoration-line установлено как "underline" и"overline" . "Line-through" не подвергается влиянию.
Значение по умолчанию | auto |
Применяется | Ко всем элементам. |
Наследуется | Да |
Анимируемое | Нет |
Версия | CSS4 |
DOM синтаксис | object.style.textDecorationSkipInk = "none"; |
Синтаксис
text-decoration-skip-ink: auto | none | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.ex1 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: none;
}
.ex2 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: auto;
}
</style>
</head>
<body>
<h2>Пример свойства text-decoration-skip-ink</h2>
<h3>Text-decoration-skip-ink: none;</h3>
<p class="ex1">Lorem Ipsum - это текст-"рыба"</p>
<h3>Text-decoration-skip-ink:auto;</h3>
<p class="ex2">Lorem Ipsum - это текст-"рыба"</p>
</body>
</html>
Значения
Значение | Описание |
---|---|
auto | Отображает линии над/под текстом, когда они не касаются глифа и не слишком приближены к нему. Значение по умолчанию. |
none | Отображает линии над/под текстом для всего текстового контента. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
64.0+ | ✕ | ✕ | 50.0+ |
Практикуйте свои знания
What does the CSS property 'text-decoration-skip-ink' do?
Правильный!
Неправильно!