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

Anonim

Η text-decoration-skipιδιότητα καθορίζει πού πρέπει να σπάσει ένα κείμενο υπογράμμισης, περίγραμμα ή διαγραφή. Αυτό βελτιώνει την αναγνωσιμότητα του διακοσμημένου κειμένου και διορθώνει τη γραμματική στίξης για ορισμένες γλώσσες.

Εδώ είναι ένα παράδειγμα:

a ( text-decoration-skip: ink; )

Προσοχή! Η inkτιμή έχει αλλάξει σε μια εντελώς νέα ιδιοκτησία, text-decoration-skip-ink: auto;.

Εάν το πρόγραμμα περιήγησής σας υποστηρίζει αυτήν την ιδιότητα, τότε θα παρατηρήσετε ότι οι απογοητευτές κάθε χαρακτήρα (όπως "y" και "p") έχουν μικρά λευκά διαστήματα γύρω από τα σύνορα:

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

Εάν το πρόγραμμα περιήγησής σας δεν υποστηρίζει αυτήν τη δυνατότητα, τότε αυτό πρέπει να περιμένετε από την ιδιοκτησία σε ένα υποστηρικτικό πρόγραμμα περιήγησης:

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

text-decoration-skip σε OSX και iOS

Στα τέλη του 2014, η Apple έκανε μια αλλαγή στα text-decorationπρογράμματα περιήγησης Safari και iOS που μιμείται πώς text-decoration-skip: ink;πρέπει να λειτουργεί. Αν και καμία από τις text-decoration-skipτιμές δεν έχει εφαρμοστεί επίσημα, μπορείτε να απενεργοποιήσετε αυτήν την προεπιλεγμένη συμπεριφορά με -webkit-text-decoration-skip: none;.

Δείτε το στυλό -webkit-text-decoration-skip: none; από CSS-Tricks (@ css-tricks) στο CodePen.

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

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

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


  • Πρόχειρο επιμελητή επιπέδου 4 της ενότητας CSS Text Decoration
  • text-decoration-skip στο MSDN.
  • Συζήτηση για προσθήκη trailing-spacesως τιμή από τη λίστα αλληλογραφίας του W3C.
  • Βελτίωση της αναγνωσιμότητας κειμένου για δυσλεκτικούς χρήστες με υπογραμμίσεις μελάνης
  • text-decoration-skip στο MDN
  • text-decoration-skip-ink στο MDN

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

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

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

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

Κινητό / Tablet

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