Css text decoration none css: text-decoration-skip — CSS: Cascading Style Sheets

text-decoration-skip — CSS: Каскадные таблицы стилей

Экспериментальная: Это экспериментальная технология
Внимательно проверьте таблицу совместимости браузера, прежде чем использовать ее в производстве.

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

Примечание: Большинство других браузеров сходятся на поддержке более простого свойства text-decoration-skip-ink .

 /* Значения ключевых слов */
пропустить текстовое оформление: нет;
текст-украшение-пропустить: объекты;
текст-украшение-пропустить: пробелы;
text-decoration-skip: края;
text-decoration-skip: box-decoration;
/* Несколько ключевых слов */
text-decoration-skip: пробелы объектов;
text-decoration-skip: начальные пробелы, конечные пробелы;
text-decoration-skip: оформление краев объектов box-decoration;
/* Глобальные значения */
text-decoration-skip: наследовать;
текст-украшение-пропустить: начальный;
текст-украшение-пропустить: вернуться;
пропустить оформление текста: вернуть слой;
пропустить текстовое оформление: не установлено;
 

Значения

нет

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

объекты

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

мест

Пропускаются все пробелы: все пробельные символы Unicode и все разделители слов, а также любые соседние интервал между буквами или интервал между словами .

начальные пробелы

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

конечные пробелы

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

края

Начало и конец текстового оформления немного смещены (например, на половину толщины линии) от края содержимого поля оформления.

Таким образом, соседние элементы получают отдельные подчеркивания. (Это важно для китайского языка, где подчеркивание является формой пунктуации.)

украшение коробки

Текстовое оформление пропускается на полях, границах и отступах блока. Это влияет только на украшения, наложенные предком; коробка для украшения никогда не закрашивает собственное украшение коробки.

 text-decoration-skip = 
  нет | 
 auto 

Пропуск ребер

HTML

 
Эй, возьми чашечку кофе!
 

CSS

 р {
  маржа: 0;
  размер шрифта: 3em;
  оформление текста: подчеркивание;
  text-decoration-skip: края;
}
 

Результат

Спецификация
CSS Модуль Text Module Level 4 # Text-Decoration

. Включите JavaScript для просмотра данных.

• украшение текста без чернил

Последнее изменение: 27 сентября 2022 г. , участниками MDN

text-decoration-color | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство text-decoration-color задает цвет подчеркивания, надчеркивания или зачеркивания текста с примененным свойством text-decoration . Он также может установить цвет подчеркивания для ссылок.

 а {
  цвет оформления текста: #E18728;
} 

Values ​​

text-decoration-color может наследовать или принимать любое значение цвета CSS, включая именованные цвета, цвета HEX, RGBa и HSLa.

Сокращение

В браузерах, которые поддерживают text-decoration-style и text-decoration-color , вы можете добавить цвет к сокращенному свойству

text-decoration :

 . underlined {
  оформление текста: подчеркивание красным пунктиром;
} 

В настоящее время только Firefox поддерживает это без префикса. Safari поддерживает его с префиксом -webkit . Chrome также требуется префикс -webkit и экспериментальные функции веб-платформы, включенные в флагах Chrome.

Demo

text-decoration-color в этой демонстрации работает в текущих версиях Firefox и Safari. Он также будет работать в Chrome с включенным флагом «экспериментальные функции веб-платформы».

Поддержка браузера

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31†	7.1*	6.0‡	None	None	None	8 *

† с включенными «экспериментальными функциями веб-платформы» в chrome://flags. Для Chrome 31 требуется префикс -webkit-. Мы протестировали Chrome 50, и он работал только без префикса.
‡ 6+ с префиксом -moz, без префикса с 36.

Дополнительная информация

• text-decoration-color в модуле оформления текста CSS уровня 3 CR
• text-decoration-color в MDN

Альманах на 2 августа 2021 г.

украшение текста

.element { украшение текста: подчеркивание; } Альманах на 2 августа 2021 г.

строка оформления текста

.element {строка-украшения-текста: подчеркивание; } Альманах на 2 августа 2021 г.

текст-украшение-пропустить

.element { text-decoration-skip: ink; } Альманах на 2 августа 2021 г.

текст-украшение-пропустить-чернила

.element {text-decoration-skip-ink: none; } Альманах на 2 августа 2021 г.

стиль оформления текста

.element { стиль оформления текста: волнистый; } Альманах на 11 января 2022 г.

толщина оформления текста

.

No related posts.