Κείμενο-υπογράμμιση-μετατόπιση - CSS-Κόλπα

Η text-underline-offsetιδιότητα στο CSS καθορίζει την απόσταση υπογράμμισης κειμένου από την αρχική τους θέση.

.text ( text-underline-offset: 0.5em; )

Μόλις εφαρμόσετε μια υπογράμμιση για ένα στοιχείο που χρησιμοποιεί text-decorationμε την τιμή της υπογράμμισης , μπορείτε να πείτε πόσο μακριά πρέπει να είναι αυτή η γραμμή από το κείμενό σας χρησιμοποιώντας την text-underline-offsetιδιότητα.

Αξίες

• auto: (Προεπιλογή) Το πρόγραμμα περιήγησης θα καθορίσει μια κατάλληλη μετατόπιση για υπογραμμίσεις.
• : Οποιοδήποτε έγκυρο μήκος με καθορισμένη μονάδα (συμπεριλαμβανομένων αρνητικών τιμών). Αυτό αντικαθιστά οποιαδήποτε πληροφορία στη γραμματοσειρά και το προεπιλεγμένο πρόγραμμα περιήγησης.
• percentage: Καθορίζει την μετατόπιση των υπογραμμίσεων ως ποσοστό 1em στη γραμματοσειρά του στοιχείου.
• initial: Η προεπιλεγμένη ρύθμιση της ιδιότητας, η οποία είναι αυτόματη.
• inherit: Υιοθετεί την υπογραμμισμένη τιμή μετατόπισης του γονέα.
• unset: Αφαιρεί την τρέχουσα μετατόπιση από το στοιχείο.

Διαδήλωση

Στην παρακάτω επίδειξη μπορείτε να αλλάξετε την τιμή για text-underline-offsetνα δείτε πώς επηρεάζει τη διακόσμηση κειμένου του στοιχείου:

Σημειώσεις

• text-underline-offset δεν είναι μέρος της στενογραφίας του text-decoration.
• Δεν λειτουργεί σε άλλες text-decorationγραμμές, όπως line-throughή overline.
• Οι αρνητικές τιμές γίνονται αποδεκτές, η οποία αντισταθμίζει την υπογράμμιση προς τα μέσα.

Είναι σταθερό για τους απογόνους

Μόλις ορίσετε μια διακόσμηση για ένα στοιχείο, όλα τα παιδιά του θα έχουν και αυτή τη διακόσμηση. Τώρα φανταστείτε ότι θέλετε να αλλάξετε την μετατόπιση της υπογράμμισης για ένα από τα παιδιά:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Αυτό δεν λειτουργεί επειδή δεν μπορείτε να παρακάμψετε μια μετατόπιση μιας υπογράμμισης που καθορίζεται από στοιχεία προγόνων. Για να λειτουργήσει αυτό, πρέπει να ορίσετε μια υπογραμμισμένη ειδικότητα για το ίδιο το στοιχείο:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Συνιστάται η χρήση τους

Το όφελος από τη χρήση μιας σχετικής τιμής όπως em είναι ότι η μετατόπιση θα κλιμακωθεί με την αλλαγή της font-sizeτιμής. Από την άλλη πλευρά, εάν χρησιμοποιείτε μια μονάδα σταθερού μήκους (π.χ. εικονοστοιχεία), η μετατόπιση δεν θα προσαρμοστεί στις αλλαγές και ενδέχεται να μην είναι η απόσταση που θέλετε να έχετε για το κείμενό σας:

Ποσοστό και καταρράκτης

Για αυτήν την ιδιότητα, ένα μήκος θα κληρονομηθεί ως σταθερή τιμή και δεν θα κλιμακωθεί με τη γραμματοσειρά. Από την άλλη πλευρά, ένα ποσοστό θα κληρονομήσει ως σχετική τιμή και, ως εκ τούτου, κλίμακα με αλλαγές στη γραμματοσειρά καθώς κληρονομεί.

Η παρακάτω επίδειξη δείχνει τη σύγκριση μεταξύ της χρήσης em και των ποσοστιαίων τιμών στην περίπτωση της κληρονομιάς και, όπως μπορείτε να δείτε, στην αριστερή πλευρά (στην οποία χρησιμοποιούμε em) η κληρονομική τιμή είναι ένα σταθερό μήκος. Μπορείτε να ελέγξετε την υπολογισμένη τιμή στα DevTools σας. Αυτό σημαίνει ότι δεν κλιμακώνεται με την αλλαγή στη γραμματοσειρά. Στη δεξιά πλευρά, ωστόσο, τα κείμενα κληρονομούν μια σχετική τιμή (στην περίπτωση αυτή 100%). ως εκ τούτου οι κλίμακες όφσετ με την αλλαγή στη γραμματοσειρά:

Λειτουργίες γραφής και θέση υπογράμμισης κειμένου

Η λειτουργία κατακόρυφης γραφής επηρεάζει τη θέση της υπογράμμισης. Αυτό θα αλλάξει την κατεύθυνση της μετατόπισης που εφαρμόζεται στο στοιχείο. Παίξτε με τις τιμές στην ακόλουθη επίδειξη:

Σχετιζομαι με

• text-decoration
• text-underline-position
• text-decoration-thickness

Περισσότερες πληροφορίες

Ενότητα Διακόσμησης κειμένου CSS Επίπεδο 4 (Πρόχειρο συντάκτη)

Υποστήριξη προγράμματος περιήγησης

Τη στιγμή αυτής της γραφής, ο Firefox είναι το μόνο πρόγραμμα περιήγησης με την πλήρη υποστήριξη. Το Safari δεν υποστηρίζει ποσοστιαίες τιμές.

κείμενο-υπογράμμιση-μετατόπιση

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι	Οχι	70+	Οχι	12.1+	Ολα

Android Chrome	Android Firefox	Πρόγραμμα περιήγησης Android	iOS Safari	Opera Mini
Οχι	Οχι	Οχι	12.2+	Ναί

text-underline-offset: ποσοστό

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι	Οχι	74+	Οχι	Οχι	Οχι

Android Chrome	Android Firefox	Πρόγραμμα περιήγησης Android	iOS Safari	Opera Mini
Οχι	Οχι	Οχι	Οχι	Ναί