Κείμενο-διακόσμηση-παράλειψη-μελάνι - CSS-Κόλπα

Anonim

text-decoration-skip-inkείναι μια ιδιότητα που ελέγχει τη συμπεριφορά underlineκαι overline(αλλά όχι line-through) όταν η γραμμή διέρχεται από μέρος ενός χαρακτήρα / γλύφου. Αυτό σας δίνει ακριβή έλεγχο του τρόπου με τον οποίο αλληλεπιδρούν οι υπογραμμίσεις ή οι γραμμές με τους χαρακτήρες που εκτείνονται πάνω από την κορυφή ή κρέμονται κάτω από το κάτω μέρος μιας γραμμής.

Προηγουμένως αυτό αντιμετωπίστηκε μέσω του text-decoration-skip: ink;συνδυασμού ιδιοκτησίας / τιμής, αλλά μετά από συζητήσεις σχετικά με τον τρόπο χειρισμού του προβλήματος των επικαλυπτόμενων στυλ χωρίς να αντικαθίστανται ακούσια στυλ χαμηλότερης προτεραιότητας (λόγω του αριθμού των διαθέσιμων επιλογών text-decoration-skip), οι μεμονωμένες ιδιότητες θα χωριστούν σε νέες ιδιότητες παρόμοια με text-decoration-skip-ink. Για περισσότερα συμφραζόμενα και παραδείγματα για το γιατί άλλαξε, δείτε αυτήν τη συζήτηση GitHub και τα πρακτικά της ομάδας εργασίας CSS που συζητούν τις ιδιότητες.

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

Μπορείτε να αλλάξετε αυτήν τη συμπεριφορά για να αναγκάσετε την υπογράμμιση / overline να περάσει από τον χαρακτήρα, ρυθμίζοντας text-decoration-skip-inkστο none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Αυτό έχει ως αποτέλεσμα την κοπή γραμμής μέσα από τους χαρακτήρες:

Σύνταξη

text-decoration-skip-ink: auto | none;

Αξίες

text-decoration-skip-ink αποδέχεται τις ακόλουθες τιμές:

  • auto είναι η προεπιλεγμένη τιμή και θα "παραλείψει" τις υπογραμμίσεις / τις υπεργραμμίσεις κατά τη διέλευση ενός χαρακτήρα.
  • none θα κόψει αυτό το υπογραμμισμένο / υπερυψωμένο σημείο μέσα από τα κρεμαστά σας και ψηλά t's.

Παράδειγμα

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

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

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

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
91 87 Οχι 88 ΤΡ

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

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

  • text-decoration-skip
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Πόροι

  • Τεκμηρίωση MDN
  • Στυλ υπογράμμισης στον Ιστό
  • Δυσλεξικοί χρήστες και υπογράμμιση μελανιού