Свойство
Описание
Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вроде «у», «р», «ц» и др. Линия может быть сплошной или прерываться, чтобы пропустить «хвостики» букв.
Синтаксис
text-decoration-skip-ink: auto | none;Подробности
| Значение | Описание |
| auto | Линия прерывается на выносных элементах символов. |
| none | Линия отображается сплошной. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#test-text {
padding: 20px;
background-color: rgb(140, 206, 228);
text-decoration: underline;
text-decoration-skip-ink: auto;
}
</style>
<div id='test-text'>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Пунктуация даже заголовок меня маленькая вершину ipsum диких свою. Назад маленький рукопись взобравшись алфавит единственное. Пунктуация даже заголовок меня маленькая вершину ipsum диких свою. Ручеек путь текстов реторический.
</div>
<style>
#test-text2 {
padding: 20px;
background-color: rgb(140, 206, 228);
text-decoration: underline;
text-decoration-skip-ink: none;
}
</style>
<div id='test-text2'>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Пунктуация даже заголовок меня маленькая вершину ipsum диких свою. Назад маленький рукопись взобравшись алфавит единственное. Пунктуация даже заголовок меня маленькая вершину ipsum диких свою. Ручеек путь текстов реторический.
</div>
</body>
</html>Читайте также
Свойство scroll-behavior
Определяет поведение прокрутки внутри элемента — плавная прокрутка или мгновенный переход....
Свойство page-break-before
Добавляет разрыв страницы при печати документа перед заданным элементом....
Свойство grid-column-end
Определяет местоположение в сетке ссылаясь на конкретные линии.
grid-column-end / grid-row-end — это линия на которой элемент заканчивается....
Свойство border-bottom-color
Устанавливает цвет нижней границы элемента....