text-decoration-thicknessNieruchomość w CSS ustawia grubość obrysu linii dekoracji, który jest używany na tekst w elemencie. Na text-decoration-linepotrzeby wartość, która będzie albo underline, line-throughalbo overlinew celu odzwierciedlenia właściwość grubości.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Składnia
auto | from-font | | Wartości
auto: (Domyślnie) Umożliwia przeglądarce określenie odpowiedniej grubości linii dekoracji tekstu.from-font: Jeśli pierwsza dostępna czcionka ma metryki określające preferowaną grubość, używa tej grubości; w przeciwnym razie zachowuje się jak wartość auto.: Dowolna poprawna długość z jednostką określa grubość linii dekoracyjnych tekstu jako stałą długość. Spowoduje to zastąpienie wszelkich informacji w czcionce i wartości domyślnej przeglądarki.percentage: Określa grubość linii dekoracji tekstu jako wartość procentową 1em w czcionce elementu.initial: Domyślne ustawienie właściwości to auto.inherit: Przyjmuje wartość grubości dekoracji rodzica.unset: Usuwa bieżącą grubość z elementu.
Próbny
Zmień wartość text-decoration-thicknessw poniższym demo, aby zobaczyć, jak ta właściwość wpływa na dekorację tekstu elementu:
Jest stała dla potomków
Po ustawieniu dekoracji dla elementu, wszystkie jego dzieci również będą miały tę dekorację. Teraz wyobraź sobie, że chcemy zmienić grubość dekoracji dla jednego z dzieci:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )To nie działa, ponieważ nie można zastąpić grubości dekoracji określonej przez elementy nadrzędne. Aby to zadziałało, należy ustawić specyfikę dekoracji dla samego elementu:
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! */ )Procent i kaskada
W przypadku tej właściwości długość będzie dziedziczyć jako stała wartość i nie będzie skalowana wraz z czcionką. Z drugiej strony procent odziedziczy jako wartość względną, a zatem będzie skalowany wraz ze zmianami czcionki w miarę dziedziczenia.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Poniższe demo pokazuje porównanie użycia em i wartości procentowych w przypadku dziedziczenia i, jak widać, po lewej stronie (w której używamy em) odziedziczona wartość ma stałą długość. Oznacza to, że nie skaluje się wraz ze zmianą czcionki. Jednak po prawej stronie tekst dziedziczy wartość względną (w tym przypadku 20%); dlatego grubość zmienia się wraz ze zmianą czcionki.
Podczas gdy bieżąca robocza wersja robocza specyfikacji odwołuje się do wartości procentowych dla text-decoration-thickness, rzeczywiste wsparcie jest obecnie ograniczone do przeglądarki Firefox.
Korzystanie z text-decoration
Bieżący szkic roboczy specyfikacji CSS Text Decoration Module Level 4 zawiera text-decoration-thicknesswartość we text-decorationwłaściwości shorthand.
.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; )Chociaż text-decorationjest dobrze obsługiwany, wsparcie dla włączenia text-decoration-thicknessjest obecnie ograniczone do przeglądarki Firefox.
Wsparcie przeglądarki
| Funkcja | TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|---|
| własność | Nie | Nie | 70 | Nie | 12.1 | Nie |
| Procenty | Nie | Nie | 76 | Nie | Nie | Nie |
| Stenografia | Nie | Nie | 70 | Nie | Nie | Nie |
| Funkcja | Android Chrome | Android Firefox | Przeglądarka Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| własność | Nie | Nie | Nie | 12.2 | Nie |
| Procenty | Nie | Nie | Nie | Nie | Nie |
| Stenografia | Nie | Nie | Nie | Nie | Nie |
Uwagi
- Właściwość była kiedyś nazywana
text-decoration-width, ale została zaktualizowana w roboczym szkicu specyfikacji CSS Text Decoration Module Level 4 na 2019 r. - Przeglądarka musi mieć minimalną grubość 1 piksela urządzenia.