Den text-decoration-thicknessejendom i CSS sætter streg tykkelse af udsmykningen linje, der bruges på tekst i et element. De text-decoration-linevalue behov for at være enten underline, line-througheller overlinefor at afspejle den tykkelse ejendom.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntaks
auto | from-font | | Værdier
auto: (Standard) Tillader browseren at specificere en passende tykkelse til tekstdekorationslinjen.from-font: Hvis den første tilgængelige skrifttype har metrics, der angiver en foretrukken tykkelse, bruger den denne tykkelse; ellers opfører det sig som den automatiske værdi.: Enhver gyldig længde med en enhed angiver tykkelsen på tekstdekorationslinjer som en fast længde. Dette erstatter alle oplysninger i skrifttypen og browserens standard.percentage: Angiver tykkelsen af tekstdekorationslinjer som en procentdel af 1 em i elementets skrifttype.initial: Standardindstillingen for ejendommen, som er automatisk.inherit: Vedtager forældrenes værdi for dekorationstykkelse.unset: Fjerner den aktuelle tykkelse fra elementet.
Demo
Skift værdien af text-decoration-thicknessi følgende demo for at se, hvordan egenskaben påvirker elementets tekstdekoration:
Det er konstant for efterkommere
Efter at have indstillet en dekoration til et element, vil alle dets børn også have den dekoration. Forestil dig nu, at vi vil ændre dekorationens tykkelse for et af børnene:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Dette virker ikke, fordi den dekorationstykkelse, der er angivet af forfædre, ikke kan tilsidesættes. For at dette skal fungere, skal der indstilles en dekorationsspecificitet for selve elementet:
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! */ )Procentdel og kaskade
For denne egenskab arver en længde som en fast værdi og skaleres ikke med skrifttypen. På den anden side arver en procentdel som en relativ værdi og skaleres derfor med ændringer i skrifttypen, når den arver.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Den følgende demo viser sammenligningen mellem at bruge em og procentværdier i tilfælde af arv, og som du kan se, på venstre side (hvor vi bruger em), er den arvede værdi en fast længde. Det betyder, at det ikke skaleres med ændringen i skrifttypen. På højre side arver teksten imidlertid en relativ værdi (i dette tilfælde 20%); derfor skaleres tykkelsen med ændringen i skrifttypen.
Mens det nuværende arbejdsudkast til specifikationen refererer til procentværdier for text-decoration-thickness, er faktisk support i øjeblikket begrænset til Firefox.
Brug med text-decoration
Det nuværende arbejdsudkast til CSS-tekstdekorationsmodul niveau 4-specifikation inkluderer text-decoration-thicknesssom en værdi i text-decorationstenografiegenskaben.
.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; )Selvom text-decorationdet understøttes godt, er support til inkludering i text-decoration-thicknessøjeblikket begrænset til Firefox.
Browsersupport
| Funktion | IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Ejendom | Ingen | Ingen | 70 | Ingen | 12.1 | Ingen |
| Procentdele | Ingen | Ingen | 76 | Ingen | Ingen | Ingen |
| Stenografi | Ingen | Ingen | 70 | Ingen | Ingen | Ingen |
| Funktion | Android Chrome | Android Firefox | Android-browser | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Ejendom | Ingen | Ingen | Ingen | 12.2 | Ingen |
| Procentdele | Ingen | Ingen | Ingen | Ingen | Ingen |
| Stenografi | Ingen | Ingen | Ingen | Ingen | Ingen |
Bemærkninger
- Ejendommen blev kaldt
text-decoration-width, men blev opdateret i 2019-arbejdsudkastet til CSS Text Decoration Module Level 4-specifikationen. - Browseren skal bruge en tykkelse på mindst 1 enhedspixel.