text-decoration-thicknessOmaisuus CSS asettaa isku paksuus koristelu linjan, jota käytetään tekstiä elementti. text-decoration-lineArvo täytyy olla joko underline, line-throughtai overlinevastaamaan paksuuden omaisuutta.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntaksi
auto | from-font | | Arvot
auto: (Oletus) Antaa selaimen määrittää sopivan paksuuden tekstin koristeluriville.from-font: Jos ensimmäisellä käytettävissä olevalla kirjasimella on metriikat, joissa määritetään ensisijainen paksuus, se käyttää kyseistä paksuutta; muuten se käyttäytyy kuten automaattinen arvo.: Mikä tahansa kelvollinen pituus yksiköllä määrittää tekstikoristeviivojen paksuuden kiinteäksi pituudeksi. Tämä korvaa kaikki fontin ja selaimen oletusarvot.percentage: Määrittää tekstikoristelujen paksuuden prosentteina 1em elementin kirjasimessa.initial: Ominaisuuden oletusasetus, joka on auto.inherit: Hyväksyy vanhemman koristepaksuusarvon.unset: Poistaa nykyisen paksuuden elementistä.
Demo
Muuta text-decoration-thicknessseuraavan esittelyn arvoa nähdäksesi, kuinka ominaisuus vaikuttaa elementin tekstikoristeluun:
Se on jatkuva jälkeläisille
Kun elementti on koristeltu, kaikilla sen lapsilla on myös koriste. Kuvittele nyt, että haluamme muuttaa yhden lapsen koristeen paksuutta:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Tämä ei toimi, koska esi-elementtien määrittelemää koristepaksuutta ei voida ohittaa. Jotta tämä toimisi, elementin itselle on asetettava koristekohtaisuus:
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! */ )Prosenttiosuus ja kaskadi
Tämän ominaisuuden pituus periytyy kiinteänä arvona, eikä sitä skaalata kirjasimen kanssa. Toisaalta prosenttiosuus periytyy suhteellisena arvona ja sen vuoksi skaalautuu kirjasimen muutosten myötä.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Seuraava demo näyttää vertailun em-arvon ja prosenttiosuuksien välillä perintötapauksissa, ja kuten näette, vasemmalla puolella (jossa emiä käytämme) peritty arvo on kiinteä pituus. Tämä tarkoittaa, että se ei muutu kirjasimen muutoksen myötä. Oikealla puolella teksti kuitenkin perii suhteellisen arvon (tässä tapauksessa 20%); siksi paksuus skaalautuu kirjasimen muutoksen myötä.
Vaikka erittelyn nykyinen luonnos viittaa prosenttiosuuksiin text-decoration-thickness, todellinen tuki on tällä hetkellä rajoitettu Firefoxiin.
Käyttäminen text-decoration
CSS-teksti-koristemoduulin tason 4 määrittelyn nykyinen työluonnos sisältää text-decoration-thicknessarvon text-decorationlyhytominaisuusominaisuudessa.
.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; )Vaikka text-decorationtuki on hyvin tuettu, sen sisällyttämisen tuki text-decoration-thicknesson tällä hetkellä rajoitettu Firefoxiin.
Selaimen tuki
| Ominaisuus | IE | Reuna | Firefox | Kromi | Safari | Ooppera |
|---|---|---|---|---|---|---|
| Omaisuus | Ei | Ei | 70 | Ei | 12.1 | Ei |
| Prosenttiosuudet | Ei | Ei | 76 | Ei | Ei | Ei |
| Lyhyt | Ei | Ei | 70 | Ei | Ei | Ei |
| Ominaisuus | Android Chrome | Android Firefox | Android-selain | iOS Safari | ooppera Mini |
|---|---|---|---|---|---|
| Omaisuus | Ei | Ei | Ei | 12.2 | Ei |
| Prosenttiosuudet | Ei | Ei | Ei | Ei | Ei |
| Lyhyt | Ei | Ei | Ei | Ei | Ei |
Huomautuksia
- Ominaisuutta kutsuttiin aiemmin
text-decoration-width, mutta se päivitettiin CSS-teksti-koristemoduulin tason 4 määrittelyn vuoden 2019 työluonnokseen. - Selaimen on käytettävä vähintään 1 laitteen pikseliä.