Η text-decoration-thicknessιδιότητα στο CSS ορίζει το πάχος της διαδρομής της γραμμής διακόσμησης που χρησιμοποιείται σε κείμενο σε ένα στοιχείο. Οι text-decoration-lineανάγκες τιμή να είναι είτε underline, line-throughή overlineνα αντανακλά το πάχος ιδιοκτησίας.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Σύνταξη
auto | from-font | | Αξίες
auto: (Προεπιλογή) Επιτρέπει στο πρόγραμμα περιήγησης να καθορίσει το κατάλληλο πάχος για τη γραμμή διακόσμησης κειμένου.from-font: Εάν η πρώτη διαθέσιμη γραμματοσειρά έχει μετρήσεις που καθορίζουν το προτιμώμενο πάχος, χρησιμοποιεί αυτό το πάχος. Διαφορετικά συμπεριφέρεται όπως η αυτόματη τιμή.: Οποιοδήποτε έγκυρο μήκος με μια μονάδα καθορίζει το πάχος των γραμμών διακόσμησης κειμένου ως σταθερό μήκος. Αυτό αντικαθιστά οποιαδήποτε πληροφορία στη γραμματοσειρά και το προεπιλεγμένο πρόγραμμα περιήγησης.percentage: Καθορίζει το πάχος των γραμμών διακόσμησης κειμένου ως ποσοστό 1em στη γραμματοσειρά του στοιχείου.initial: Η προεπιλεγμένη ρύθμιση της ιδιότητας που είναι αυτόματη.inherit: Υιοθετεί την τιμή πάχους διακόσμησης του γονέα.unset: Αφαιρεί το τρέχον πάχος από το στοιχείο.
Διαδήλωση
Αλλάξτε την τιμή της text-decoration-thicknessπαρακάτω επίδειξης για να δείτε πώς η ιδιότητα επηρεάζει τη διακόσμηση κειμένου του στοιχείου:
Είναι σταθερό για τους απογόνους
Αφού ορίσει μια διακόσμηση για ένα στοιχείο, όλα τα παιδιά του θα έχουν και αυτή τη διακόσμηση. Τώρα φανταστείτε ότι θέλουμε να αλλάξουμε το πάχος της διακόσμησης για ένα από τα παιδιά:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Αυτό δεν λειτουργεί επειδή το πάχος της διακόσμησης που καθορίζεται από τα στοιχεία των προγόνων δεν μπορεί να παρακαμφθεί. Για να λειτουργήσει αυτό, πρέπει να οριστεί μια ιδιαιτερότητα διακόσμησης για το ίδιο το στοιχείο:
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! */ )Ποσοστό και καταρράκτης
Για αυτήν την ιδιότητα, ένα μήκος θα κληρονομηθεί ως σταθερή τιμή και δεν θα κλιμακωθεί με τη γραμματοσειρά. Από την άλλη πλευρά, ένα ποσοστό θα κληρονομήσει ως σχετική τιμή και, ως εκ τούτου, κλίμακα με αλλαγές στη γραμματοσειρά καθώς κληρονομεί.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Η παρακάτω επίδειξη δείχνει τη σύγκριση μεταξύ της χρήσης em και των ποσοστιαίων τιμών στην περίπτωση της κληρονομιάς και, όπως μπορείτε να δείτε, στην αριστερή πλευρά (στην οποία χρησιμοποιούμε em) η κληρονομική τιμή είναι ένα σταθερό μήκος. Αυτό σημαίνει ότι δεν κλιμακώνεται με την αλλαγή στη γραμματοσειρά. Στη δεξιά πλευρά, ωστόσο, το κείμενο κληρονομεί μια σχετική τιμή (στην περίπτωση αυτή 20%). ως εκ τούτου το πάχος κλιμακώνεται με την αλλαγή στη γραμματοσειρά.
Ενώ το τρέχον προσχέδιο εργασίας της προδιαγραφής αναφέρεται σε ποσοστιαίες τιμές για text-decoration-thickness, η πραγματική υποστήριξη περιορίζεται προς το παρόν στον Firefox.
Χρησιμοποιώντας με text-decoration
Το τρέχον προσχέδιο εργασίας της προδιαγραφής CSS Text Decoration Module Level 4 περιλαμβάνει text-decoration-thicknessως τιμή στην text-decorationιδιοκτησία στενότητας.
.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; )Ενώ text-decorationυποστηρίζεται καλά, η υποστήριξη για τη συμπερίληψη text-decoration-thicknessαυτή τη στιγμή περιορίζεται στον Firefox.
Υποστήριξη προγράμματος περιήγησης
| χαρακτηριστικό | ΙΕ | Ακρη | Firefox | Χρώμιο | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ |
|---|---|---|---|---|---|---|
| Ιδιοκτησία | Οχι | Οχι | 70 | Οχι | 12.1 | Οχι |
| Ποσοστά | Οχι | Οχι | 76 | Οχι | Οχι | Οχι |
| Στενογραφία | Οχι | Οχι | 70 | Οχι | Οχι | Οχι |
| χαρακτηριστικό | Android Chrome | Android Firefox | Πρόγραμμα περιήγησης Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Ιδιοκτησία | Οχι | Οχι | Οχι | 12.2 | Οχι |
| Ποσοστά | Οχι | Οχι | Οχι | Οχι | Οχι |
| Στενογραφία | Οχι | Οχι | Οχι | Οχι | Οχι |
Σημειώσεις
- Η ιδιοκτησία κάλεσε
text-decoration-width, αλλά ενημερώθηκε στο προσχέδιο εργασίας του 2019 για την προδιαγραφή επιπέδου 4 του CSS Text Decoration Module. - Το πρόγραμμα περιήγησης πρέπει να χρησιμοποιεί ελάχιστο πάχος 1 pixel συσκευής