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

Anonim

Η text-underline-positionιδιότητα ορίζει την τοποθέτηση της υπογράμμισης σε συνδέσμους ή σε κείμενο με text-decoration: underline;εφαρμοσμένο.

a ( text-underline-position: under; )

Αξίες

Αυτές είναι οι τιμές που καθορίζονται στο W3C CSS Text Decoration Module Level 3 Candidate Recommendation:

  • auto: η προεπιλεγμένη. Το πρόγραμμα περιήγησης θα αποφασίσει μεταξύ της τοποθέτησης του υπογράμμισης στη γραμμή βάσης του κειμένου ή κάτω από αυτό.
  • inherit: κληρονομεί την υπογραμμισμένη θέση του γονέα.
  • under: τοποθετεί την υπογράμμιση κάτω από το κείμενο με επιπλέον χώρο για να αποτρέψει τη διέλευση των απογόνων.
  • left: για κατακόρυφους τρόπους γραφής. Αυτό τοποθετεί τη γραμμή στα αριστερά του κειμένου.
  • right: για κατακόρυφους τρόπους γραφής. Αυτό τοποθετεί τη γραμμή στα δεξιά του κειμένου.

Η Microsoft χρησιμοποιεί ένα διαφορετικό σύνολο τιμών για τον Internet Explorer:

  • auto: η προεπιλεγμένη. Τοποθετεί την υπογράμμιση κάτω από το κείμενο για όλες τις γλώσσες εκτός από τα ιαπωνικά (ανατρέξτε στον σύνδεσμο MSDN στην ενότητα "Περισσότερες πληροφορίες" παρακάτω για λεπτομέρειες).
  • above: τοποθετεί την υπογράμμιση πάνω από το κείμενο. Οπτικά πανομοιότυπο μεtext-decoration: overline;
  • below: τοποθετεί την υπογράμμιση κάτω από το κείμενο. Σημειώστε ότι αυτό είναι διαφορετικό από under- δεν θα καθαρίσει τους απογόνους.
  • auto-posλειτουργεί το ίδιο με την εφαρμογή MS του auto.

Διαδήλωση

Τη στιγμή αυτής της γραφής, text-underline-positionυποστηρίζεται μόνο εν μέρει από το Chrome (33+ με ενεργοποιημένες πειραματικές σημαίες) και τον Internet Explorer 6+. Το Chrome υποστηρίζει τις auto, inheritκαι underτιμές από την υποψήφια πρόταση του W3C, ενώ το IE υποστηρίζει τις δικές του εναλλακτικές τιμές.

Αυτό το demo δείχνει τις τιμές underκαι τις belowτιμές στα προγράμματα περιήγησης που τις υποστηρίζουν.

Δείτε το στυλό κείμενο-υπογραμμισμένη θέση από CSS-Tricks (@ css-tricks) στο CodePen.

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

  • κείμενο-διακόσμηση

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

  • text-underline-position στο CSS Text Decoration Module Level 3 CR.
  • text-underline-position στο MSDN.

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

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
33 * Κανένας Κανένας Κανένας 6 † Κανένας Κανένας

* με -webkitπροθέματα και πειραματικές σημαίες ενεργοποιημένες στο chrome: // flags. leftκαι οι rightτιμές δεν υποστηρίζονται.
† με -msπρόθεμα και ειδικές τιμές IE.