La text-decoration-thicknessproprietà in CSS imposta lo spessore del tratto della linea di decorazione utilizzata sul testo in un elemento. Le text-decoration-lineesigenze di valore da uno underline, line-througho overlineper riflettere la proprietà di spessore.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintassi
auto | from-font | | Valori
auto: (Impostazione predefinita) consente al browser di specificare uno spessore appropriato per la linea di decorazione del testo.from-font: Se il primo carattere disponibile ha metriche che specificano uno spessore preferito, utilizza quello spessore; altrimenti si comporta come il valore auto.: Qualsiasi lunghezza valida con un'unità specifica lo spessore delle linee di decorazione del testo come lunghezza fissa. Questo sostituisce qualsiasi informazione nel carattere e l'impostazione predefinita del browser.percentage: Specifica lo spessore delle linee di decorazione del testo come percentuale di 1em nel carattere dell'elemento.initial: L'impostazione predefinita della proprietà che è auto.inherit: Adotta il valore dello spessore della decorazione del genitore.unset: Rimuove lo spessore corrente dall'elemento.
Demo
Modificare il valore di text-decoration-thicknessnella seguente demo per vedere come la proprietà influisce sulla decorazione del testo dell'elemento:
È costante per i discendenti
Dopo aver impostato una decorazione per un elemento, anche tutti i suoi figli avranno quella decorazione. Ora immagina di voler cambiare lo spessore della decorazione per uno dei bambini:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Questo non funziona perché lo spessore della decorazione specificato dagli elementi antenati non può essere sovrascritto. Perché funzioni, è necessario impostare una specificità di decorazione per l'elemento stesso:
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! */ )Percentuale e cascata
Per questa proprietà, una lunghezza erediterà come valore fisso e non verrà scalata con il carattere. D'altra parte, una percentuale erediterà come valore relativo e, quindi, ridimensionerà con le modifiche nel carattere mentre eredita.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )La seguente demo mostra il confronto tra l'utilizzo di em e i valori percentuali nel caso di ereditarietà e, come puoi vedere, sul lato sinistro (in cui stiamo usando em) il valore ereditato è una lunghezza fissa. Ciò significa che non si ridimensiona con la modifica del carattere. A destra, invece, il testo eredita un valore relativo (in questo caso 20%); quindi lo spessore si ridimensiona con il cambio del carattere.
Sebbene l'attuale bozza di lavoro della specifica faccia riferimento a valori percentuali per text-decoration-thickness, il supporto effettivo è attualmente limitato a Firefox.
Usando con text-decoration
L'attuale bozza di lavoro della specifica CSS Text Decoration Module Livello 4 include text-decoration-thicknesscome valore nella text-decorationproprietà 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; )Sebbene text-decorationsia ben supportato, il supporto per l'inclusione di text-decoration-thicknessè attualmente limitato a Firefox.
Supporto del browser
| Caratteristica | IE | Bordo | Firefox | Cromo | Safari | musica lirica |
|---|---|---|---|---|---|---|
| Proprietà | No | No | 70 | No | 12.1 | No |
| Percentuali | No | No | 76 | No | No | No |
| Abbreviazione | No | No | 70 | No | No | No |
| Caratteristica | Android Chrome | Android Firefox | Browser Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Proprietà | No | No | No | 12.2 | No |
| Percentuali | No | No | No | No | No |
| Abbreviazione | No | No | No | No | No |
Appunti
- La proprietà veniva chiamata
text-decoration-width, ma è stata aggiornata nella bozza di lavoro 2019 della specifica CSS Text Decoration Module Level 4. - Il browser deve utilizzare uno spessore minimo di 1 pixel del dispositivo.