Свойство

Описание

Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вроде «у», «р», «ц» и др. Линия может быть сплошной или прерываться, чтобы пропустить «хвостики» букв.

Синтаксис

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>

Описание

Синтаксис

Подробности

Пример

Читайте также

Свойство text-stroke-color

Свойство min-height

Селекторы атрибутов со значениями в конце

Функция var()