text-decoration-skip-ink

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство text-decoration-skip-ink CSS определяет, как отрисовываются надстрочные и подстрочные линии, когда они проходят над восходящими и нисходящими элементами глифов.

Попробовать

text-decoration-skip-ink не является частью сокращенного синтаксиса text-decoration.

Синтаксис

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/* Global keywords */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;

Значения

none

Надстрочные и подстрочные линии рисуются по всей длине текстового содержимого, включая части, пересекающие нисходящие и восходящие элементы глифов.

auto

Значение по умолчанию — браузер может прерывать подстрочные и надстрочные линии, чтобы они не касались или не приближались к глифу. То есть они прерываются там, где иначе пересекались бы с глифом.

all

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

An example of "text-decoration-skip-ink".

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

Начальное значение	`auto`
Применяется к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

text-decoration-skip-ink = 
  auto  |
  none  |
  all

Примеры

HTML

<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
  この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>

CSS

p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}

Результат

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

Спецификация
CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text-decoration-skip-ink`	64	79	70	50	15.4	64	79	46	15.4	9.0	64
`all`	Нет	Нет	75	Нет	15.4	Нет	79	Нет	15.4	Нет	Нет
`auto`	64	79	70	51	15.4	64	79	47	15.4	9.0	64
`none`	64	79	70	51	15.4	64	79	47	15.4	9.0	64

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink