Свойство CSS `text-decoration-inset`

Свойство text-decoration-inset CSS позволяет изменять начальную и конечную точки текстового оформления элемента: его можно укоротить, удлинить или сдвинуть относительно отображаемого текста.

Попробуйте

text-decoration-inset: 20px;

text-decoration-inset: -0.5em;

text-decoration-inset: 20px 1em;

text-decoration-inset: -0.5rem -1.5rem;

text-decoration-inset: -2ex 10vw;

<section id="default-example">
  <p id="example-element">Karmadrome</p>
</section>

#example-element {
  font: 2.5em sans-serif;
  text-decoration: underline 0.3em limegreen;
}

Синтаксис

/* auto keyword */
text-decoration-inset: auto;

/* One <length> value */
text-decoration-inset: 20px;
text-decoration-inset: -2rem;

/* Two <length> values */
text-decoration-inset: 20px 1em;
text-decoration-inset: -0.5rem -1.5rem;
text-decoration-inset: -2ex 1vw;

/* Global values */
text-decoration-inset: inherit;
text-decoration-inset: initial;
text-decoration-inset: revert;
text-decoration-inset: revert-layer;
text-decoration-inset: unset;

Значения

Это свойство задаётся одним или двумя значениями из перечисленных ниже либо ключевым словом auto:

<length>

Задаёт величину корректировки положения текстового оформления. Положительные значения смещают текстовое оформление внутрь (укорачивают его), а отрицательные — наружу (удлиняют его). Если указано одно значение, оно применяется к начальной и конечной точкам текстового оформления. Если указаны два значения, первое применяется к начальной точке, а второе — к конечной.

auto

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

Описание

По умолчанию текстовое оформление элемента, заданное сокращённым свойством text-decoration и связанными с ним развернутыми свойствами, имеет ту же длину, что и отображаемый текст.

Свойство text-decoration-inset позволяет корректировать начальную и/или конечную точки текстового оформления текстового контейнера. Это полезно для создания эффектов, при которых текстовое оформление смещено внутрь или наружу относительно самого текста либо сдвинуто в сторону. Примеры каждого случая см. в разделе Основные варианты использования.

Одно значение <length> задаёт смещение внутрь (для положительного значения) или наружу (для отрицательного) в начальной и конечной точках текстового оформления. Чтобы задать начальную и конечную точки отдельно, можно использовать два значения <length>: первое применяется к начальной точке текстового оформления, а второе — к конечной.

Свойство text-decoration-inset также может принимать ключевое слово auto. В этом случае браузер смещает внутрь начальную и конечную точки текстового оформления так, чтобы два расположенных рядом блока с оформленным текстом не выглядели как одно непрерывное текстовое оформление. Значение auto особенно важно при отображении китайского текста, где подчёркивание используется для расстановки знаков препинания в именах собственных, а у соседних имён собственных должны быть отдельные подчёркивания. Пример см. в разделе Эффект значения auto.

Значение auto не действует так же, как начальное значение 0. Если задать для text-decoration-inset значение 0, промежутка между элементами текстового оформления не будет.

Свойство text-decoration-inset не наследуется и не является составным свойством сокращённого свойства text-decoration.

Формальное определение

Формальный синтаксис

text-decoration-inset = 
  <length-percentage>{1,2} |
  auto

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Основные варианты использования

В этом примере показаны случаи смещения наружу, внутрь и в сторону.

HTML

Мы определяем маркированный список из трёх элементов, каждый из которых имеет отдельный id.

<ul>
  <li id="one">Outset decoration</li>
  <li id="two">Inset decoration</li>
  <li id="three">Shifted decoration</li>
</ul>

CSS

Для каждого элемента списка задаём разные свойства text-decoration и text-decoration-inset:

• У первого элемента толстое салатовое подчёркивание, равномерно смещённое наружу на 10px с обеих сторон.
• У второго элемента белая зачёркивающая линия средней толщины, равномерно смещённая внутрь на 0.5em с обеих сторон.
• У третьего элемента тонкое волнистое синее подчёркивание, сдвинутое вправо на 1em.

li {
  font-family: sans-serif;
  font-size: 2em;
  margin-bottom: 20px;
}

@supports not (text-decoration-inset: auto) {
  body::before {
    content: "Your browser doesn't support the text-decoration-inset property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

#one {
  text-decoration: underline 0.3em limegreen;
  text-decoration-inset: -10px;
}

#two {
  text-decoration: line-through 5px white;
  text-decoration-inset: 0.5em;
}

#three {
  text-decoration: underline wavy 2px blue;
  text-decoration-inset: 1em -1em;
}

Результат

Результат выглядит так:

Эффект значения auto

В этом примере показан эффект значения text-decoration-inset: auto.

HTML

Мы определяем две группы расположенных рядом элементов <u>:

<p lang="zh" id="one"><u>石井</u><u>艾俐俐</u></p>

<p lang="zh" id="two"><u>石井</u><u>艾俐俐</u></p>

CSS

Для каждого элемента <u> задаются цвет red и толщина 3px подчёркивания. Для первой группы элементов <u> задано значение text-decoration-inset — auto, а для второй группы явно задано начальное значение text-decoration-inset — 0, чтобы их можно было сравнить:

u {
  font-family: sans-serif;
  font-size: 2em;
}

@supports not (text-decoration-inset: auto) {
  body::before {
    content: "Your browser doesn't support the text-decoration-inset property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

u {
  text-decoration-color: red;
  text-decoration-thickness: 3px;
}

#one u {
  text-decoration-inset: auto;
}

#two u {
  text-decoration-inset: 0;
}

Результат

Результат выглядит так:

Обратите внимание, что значение auto слегка смещает текстовое оформление внутрь с обеих сторон, создавая промежуток между подчёркиваниями двух элементов (между самими элементами пробел не добавляется). Значение 0 не создаёт промежутка.

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

Совместимость с браузерами

См. также

• text-decoration
• Модуль текстового оформления CSS