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

Anonim

Η text-decoration-lineιδιότητα διακοσμεί κείμενο με μια υπογράμμιση, περίγραμμα, γραμμή ή συνδυασμό αυτών των γραμμών.

p ( text-decoration-line: underline; )

Αξίες

  • none: δεν προστίθεται καμία γραμμή και αφαιρούνται τυχόν υπάρχουσες γραμμές - για παράδειγμα noneαφαιρεί την προεπιλεγμένη υπογράμμιση στους συνδέσμους.
  • underline: προσθέτει μια υπογράμμιση 1px κάτω από το κείμενο.
  • overline: προσθέτει μια επισκόπηση 1px πάνω από το κείμενο
  • line-through: προσθέτει μια γραμμή 1px μέσω του κειμένου.
  • inherit: κληρονομεί τη διακόσμηση του γονέα.

Η τιμή blinkείναι στην προδιαγραφή W3C, αλλά έχει καταργηθεί και δεν θα λειτουργεί σε κανένα τρέχον πρόγραμμα περιήγησης. Όταν λειτούργησε, έκανε το κείμενο να φαίνεται "αναβοσβήνει" αλλάζοντας γρήγορα μεταξύ 0% και 100% αδιαφάνειας.

Συνδυασμός τιμών

Μπορείτε να συνδυάσετε το underline, overlineή τις line-throughτιμές σε μια λίστα χωρισμένη με κενό για να προσθέσετε πολλές γραμμές διακόσμησης:

p ( text-decoration-line: overline underline line-through; )

Χρήση

Το text-decoration-lineακίνητο είναι σχεδόν ίδιο με το αρχικό text-decoration. Εάν το μόνο που θέλετε να κάνετε είναι να προσθέσετε μια γραμμή ή γραμμές στο κείμενό σας, text-decorationείναι μια καλύτερη επιλογή επειδή υποστηρίζεται από κάθε πρόγραμμα περιήγησης, ακόμη και από πολύ παλιά. Γενικά, η χρήση μιας text-decoration-lineδήλωσης έχει νόημα μόνο όταν γράφετε έναν κανόνα μακροχρόνιου στυλ που περιλαμβάνει text-decoration-styleή μια text-decoration-colorδήλωση. Εάν θέλετε να χρησιμοποιήσετε και τα τρία μαζί, μπορείτε να χρησιμοποιήσετε τη στενή text-decorationιδιότητα.

Στενογραφία

text-decoration-lineμπορεί να χρησιμοποιηθεί σε συνδυασμό με text-decoration-styleκαι text-decoration-colorστην σύντομη text-decorationιδιότητα CSS3 (επί του παρόντος μόνο το Firefox υποστηρίζει πλήρως αυτό):

.underlined ( text-decoration: underline dotted red; )

Διαδήλωση

Αυτή η επίδειξη θα λειτουργήσει σε Safari, Firefox και Chrome με ενεργοποιημένες τις πειραματικές λειτουργίες πλατφόρμας ιστού. Η blinkτιμή δεν περιλαμβάνεται.

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

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

  • κείμενο-διακόσμηση
  • κείμενο-διακόσμηση-στυλ
  • κείμενο-διακόσμηση-χρώμα
  • κείμενο-διακόσμηση-παράλειψη

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

  • text-decoration-line στις προδιαγραφές W3C
  • text-decoration-line στο MDN

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

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

* Με -webkitπρόθεμα
† με πειραματική πλατφόρμα Web διαθέτει σημαία ενεργοποιημένη
‡ 6-35 με -mozπρόθεμα, χωρίς πρόθεμα όπως της 36.