Den text-decoration-thicknessegenskap i CSS setter slag tykkelsen av dekorasjonen linje som er brukt på tekst i et element. De text-decoration-lineverdi må være enten underline, line-througheller overlineå reflektere tykkelsen eiendom.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntaks
auto | from-font | | Verdier
auto: (Standard) Lar nettleseren spesifisere en passende tykkelse for tekstdekorasjonslinjen.from-font: Hvis den første tilgjengelige fonten har beregninger som angir en foretrukket tykkelse, bruker den tykkelsen; ellers oppfører den seg som den automatiske verdien.: Enhver gyldig lengde med en enhet angir tykkelsen på tekstdekorasjonslinjene som en fast lengde. Dette erstatter all informasjon i skriften og nettleserens standard.percentage: Spesifiserer tykkelsen på tekstdekorasjonslinjene som en prosentandel av 1 em i elementets font.initial: Standardinnstillingen for egenskapen som er automatisk.inherit: Vedtar dekorasjons tykkelsesverdien til foreldrene.unset: Fjerner gjeldende tykkelse fra elementet.
Demo
Endre verdien av text-decoration-thicknessi følgende demo for å se hvordan egenskapen påvirker elementets tekstdekorasjon:
Det er konstant for etterkommere
Etter å ha satt en dekorasjon for et element, vil alle barna også ha den dekorasjonen. Tenk deg at vi vil endre dekorasjonens tykkelse for et av barna:
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 fungerer ikke fordi dekorasjonstykkelsen spesifisert av forfedreelementer ikke kan overstyres. For at dette skal fungere, må det innstilles en dekorasjonsspesifisitet 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! */ )Prosentandel og kaskade
For denne egenskapen vil en lengde arve som en fast verdi, og skaleres ikke med skriften. På den annen side vil en prosentandel arve som en relativ verdi og derfor skalere med endringer i skriften når den arver.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Følgende demo viser sammenligningen mellom å bruke em og prosentverdier i tilfelle arv, og som du kan se, på venstre side (der vi bruker dem), er den arvede verdien en fast lengde. Det betyr at den ikke skalerer med endringen i skrift. På høyre side arver imidlertid teksten en relativ verdi (i dette tilfellet 20%); derfor skalerer tykkelsen seg med endringen i skrifttypen.
Mens det nåværende arbeidsutkastet til spesifikasjonen refererer til prosentverdier for text-decoration-thickness, er faktisk støtte for øyeblikket begrenset til Firefox.
Bruke med text-decoration
Gjeldende arbeidsutkast til CSS Tekstdekorasjonsmodul Nivå 4 spesifikasjon inkluderer text-decoration-thicknesssom en verdi i text-decorationstenografiegenskapen.
.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; )Selv om text-decorationdet støttes godt, er støtte for inkludering av for text-decoration-thicknesstiden begrenset til Firefox.
Nettleserstøtte
| Trekk | DVS | Kant | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Eiendom | Nei | Nei | 70 | Nei | 12.1 | Nei |
| Prosentandel | Nei | Nei | 76 | Nei | Nei | Nei |
| Forkortelse | Nei | Nei | 70 | Nei | Nei | Nei |
| Trekk | Android Chrome | Android Firefox | Android-nettleser | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Eiendom | Nei | Nei | Nei | 12.2 | Nei |
| Prosentandel | Nei | Nei | Nei | Nei | Nei |
| Forkortelse | Nei | Nei | Nei | Nei | Nei |
Merknader
- Eiendommen pleide å bli kalt
text-decoration-width, men ble oppdatert i arbeidsutkastet for 2019 av CSS Text Decoration Module Level 4 spesifikasjon. - Nettleseren må bruke en tykkelse på minst 1 enhetspiksel.