De text-decoration-thicknesseigenschap in CSS stelt de lijndikte in van de decoratielijn die wordt gebruikt op tekst in een element. De text-decoration-linewaarde moet ofwel underlinezijn line-through, ofwel overlinede dikte-eigenschap weerspiegelen.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntaxis
auto | from-font | | Waarden
auto: (Standaard) Hiermee kan de browser een geschikte dikte specificeren voor de tekstdecoratieregel.from-font: Als het eerste beschikbare lettertype metrieken heeft die een voorkeursdikte specificeren, gebruikt het die dikte; anders gedraagt het zich als de auto-waarde.: Elke geldige lengte met een eenheid specificeert de dikte van tekstdecoratieregels als een vaste lengte. Dit vervangt alle informatie in het lettertype en de standaardbrowser.percentage: Specificeert de dikte van tekstdecoratieregels als een percentage van 1em in het lettertype van het element.initial: De standaardinstelling van de eigenschap die auto is.inherit: Neemt de waarde van de decoratiedikte van de ouder aan.unset: Verwijdert de huidige dikte van het element.
Demo
Verander de waarde van text-decoration-thicknessin de volgende demo om te zien hoe de eigenschap de tekstversiering van het element beïnvloedt:
Het is constant voor nakomelingen
Na het plaatsen van een versiering voor een element, krijgen al zijn kinderen die versiering ook. Stel je nu voor dat we de dikte van de decoratie voor een van de kinderen willen veranderen:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Dit werkt niet omdat de decoratiedikte gespecificeerd door voorouderelementen niet kan worden overschreven. Om dit te laten werken, moet een decoratiespecificiteit worden ingesteld voor het element zelf:
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! */ )Percentage en de cascade
Voor deze eigenschap zal een lengte als vaste waarde erven en niet schalen met het lettertype. Aan de andere kant zal een percentage erven als een relatieve waarde en daarom schalen met veranderingen in het lettertype als het erft.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )De volgende demo toont de vergelijking tussen het gebruik van em en percentagewaarden in het geval van overerving en, zoals je kunt zien, aan de linkerkant (waarin we em gebruiken) is de overgeërfde waarde een vaste lengte. Dat betekent dat het niet schaalt met de verandering in het lettertype. Aan de rechterkant erft de tekst echter een relatieve waarde (in dit geval 20%); daarom schaalt de dikte met de verandering in het lettertype.
Hoewel de huidige versie van de specificatie verwijst naar percentagewaarden text-decoration-thickness, is de daadwerkelijke ondersteuning momenteel beperkt tot Firefox.
Gebruiken met text-decoration
De huidige werkversie van de CSS Text Decoration Module Level 4-specificatie bevat text-decoration-thicknessals een waarde in de text-decorationsteno-eigenschap.
.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; )Hoewel text-decorationgoed wordt ondersteund, is ondersteuning voor de opname van text-decoration-thicknessmomenteel beperkt tot Firefox.
Browser-ondersteuning
| Voorzien zijn van | D.W.Z | Rand | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Eigendom | Nee | Nee | 70 | Nee | 12.1 | Nee |
| Percentages | Nee | Nee | 76 | Nee | Nee | Nee |
| Steno | Nee | Nee | 70 | Nee | Nee | Nee |
| Voorzien zijn van | Android Chrome | Android Firefox | Android-browser | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Eigendom | Nee | Nee | Nee | 12.2 | Nee |
| Percentages | Nee | Nee | Nee | Nee | Nee |
| Steno | Nee | Nee | Nee | Nee | Nee |
Opmerkingen
- De eigenschap heette vroeger
text-decoration-width, maar is bijgewerkt in de werkversie van 2019 van de CSS Text Decoration Module Level 4-specificatie. - De browser moet een minimale dikte van 1 apparaatpixel gebruiken.