text-decoration-thicknessВластивість в CSS задає товщину обведення декоративної лінії, яка використовується на текст в елементі. Ці text-decoration-lineпотреби значення , щоб бути underline, line-throughабо overlineвідображати товщину властивості.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Синтаксис
auto | from-font | | Цінності
auto: (За замовчуванням) Дозволяє браузеру вказати відповідну товщину для рядка для оформлення тексту.from-font: Якщо перший доступний шрифт має показники, що вказують бажану товщину, він використовує цю товщину; інакше він поводиться як значення авто.: Будь-яка допустима довжина з одиницею визначає товщину рядків для оформлення тексту як фіксовану довжину. Це замінює будь-яку інформацію у шрифті та браузер за замовчуванням.percentage: Визначає товщину рядків для оформлення тексту у відсотках 1em у шрифті елемента.initial: Значення за замовчуванням для властивості, яке є автоматичним.inherit: Приймає значення товщини оздоблення для батьків.unset: Видаляє поточну товщину елемента.
Демо
Змініть значення text-decoration-thicknessв наступній демонстрації, щоб побачити, як властивість впливає на текстове оформлення елемента:
Для нащадків це постійно
Після встановлення прикраси для елемента всі його діти також матимуть це прикраса. А тепер уявіть, що ми хочемо змінити товщину прикраси для одного з дітей:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Це не працює, оскільки товщину оздоблення, визначену елементами предків, неможливо замінити. Щоб це працювало, потрібно встановити специфіку декору для самого елемента:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Відсоток і каскад
Для цієї властивості довжина успадковуватиметься як фіксоване значення і не буде масштабуватися за допомогою шрифту. З іншого боку, відсоток успадковуватиметься як відносне значення і, отже, масштабуватиметься зі змінами шрифту в міру успадкування.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Наступна демонстрація демонструє порівняння використання em та процентних значень у випадку успадкування, і, як бачите, зліва (у якому ми використовуємо em) успадковане значення має фіксовану довжину. Це означає, що він не масштабується зі зміною шрифту. Праворуч, проте, текст успадковує відносне значення (в даному випадку 20%); тому товщина масштабується зі зміною шрифту.
Хоча поточний робочий проект специфікації посилається на відсоткові значення для text-decoration-thickness, фактична підтримка наразі обмежена Firefox.
Використання за допомогою text-decoration
Поточний робочий проект специфікації Модуль оформлення тексту CSS рівня 4 включає text-decoration-thicknessяк значення у text-decorationскорочену властивість.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Хоча text-decorationце добре підтримується, підтримка включення в text-decoration-thicknessданий час обмежена Firefox.
Підтримка браузера
| Особливість | IE | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|---|
| Власність | Ні | Ні | 70 | Ні | 12.1 | Ні |
| Відсотки | Ні | Ні | 76 | Ні | Ні | Ні |
| Стенографія | Ні | Ні | 70 | Ні | Ні | Ні |
| Особливість | Android Chrome | Android Firefox | Браузер Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Власність | Ні | Ні | Ні | 12.2 | Ні |
| Відсотки | Ні | Ні | Ні | Ні | Ні |
| Стенографія | Ні | Ні | Ні | Ні | Ні |
Примітки
- Раніше називалося властивість
text-decoration-width, але оновлене в робочому проекті специфікації CSS Модуль оформлення тексту рівня 4 у 2019 році. - Браузер повинен використовувати мінімальну товщину 1 піксель пристрою.