Text-align-last - CSS-Κόλπα

Anonim

text-align-lastσάς επιτρέπει να ελέγχετε την ευθυγράμμιση της τελευταίας (ή μόνο) γραμμής κειμένου ακριβώς πριν από μια αναγκαστική αλλαγή γραμμής - για παράδειγμα το τέλος μιας παραγράφου ή τη γραμμή ακριβώς πριν από μια
ετικέτα.

.intro-graph ( text-align-last: center; )

Κατά τη στιγμή αυτής της γραφής, υποστηρίζονται μόνο τα προγράμματα περιήγησης Mozilla και ο Internet Explorer text-align-last(με προθέματα προμηθευτών) και το καθένα έχει μια ελαφρώς διαφορετική εφαρμογή. Η ιδιότητα έπρεπε να ξεκινήσει να λειτουργεί στο Chrome 35, αλλά από το Chrome 40 εξακολουθεί να απαιτεί την πειραματική σημαία πλατφορμών ιστού Περισσότερες λεπτομέρειες σχετικά με τις εφαρμογές προγράμματος περιήγησης στα Σημεία ενδιαφέροντος.

Αξίες

  • left ευθυγραμμίζει την τελευταία γραμμή κειμένου προς τα αριστερά του κοντέινερ.
  • rightευθυγραμμίζει την τελευταία γραμμή κειμένου προς τα δεξιά του κοντέινερ.
  • center κεντράρει την τελευταία γραμμή κειμένου μέσα στο κοντέινερ.
  • justify δικαιολογεί την τελευταία γραμμή κειμένου, ώστε να εκτείνεται σε όλο το πλάτος του κοντέινερ, εισάγοντας κενό μεταξύ λέξεων, εάν χρειάζεται, για να αυξήσετε το μήκος της γραμμής.
  • startευθυγραμμίζει το κείμενο με την "έναρξη" της γραμμής με βάση directionτο κείμενο - αριστερά για γλώσσες LTR, δεξιά για γλώσσες RTL.
  • endευθυγραμμίζει την τελευταία γραμμή με το "τέλος" της γραμμής με βάση directionτο κείμενο - δεξιά για γλώσσες LTR, αριστερά για γλώσσες RTL.
  • autoη προεπιλεγμένη. Ευθυγραμμίζει την τελευταία γραμμή κειμένου για να ταιριάζει με την text-alignιδιότητα του στοιχείου , εάν έχει οριστεί. Εάν δεν έχει ρυθμιστεί, autoευθυγραμμίζει το κείμενο στην αρχή.
  • inheritεφαρμόζει την text-align-lastιδιότητα του γονικού στοιχείου.

Διαδήλωση

Αυτό το demo δείχνει τις διαφορετικές text-align-lastτιμές σε δράση. Σημείωση: Ο Internet Explorer δεν υποστηρίζει τις τιμές startή τις endτιμές.

Δείτε το στυλό κείμενο-align-last από CSS-Tricks (@ css-tricks) στο CodePen

Σημεία ενδιαφέροντος

Στον Internet Explorer, text-align-lastλειτουργεί μόνο όταν το text-alignυπόλοιπο του κειμένου στο επιλεγμένο στοιχείο έχει οριστεί σε justify. Επίσης, το IE δεν αναγνωρίζει το startή την endτιμή.

Στα προγράμματα περιήγησης Mozilla, text-align-lastθα λειτουργήσει στην τελευταία γραμμή πριν από μια αναγκαστική αλλαγή γραμμής ακόμη και αν δεν έχει καθοριστεί ευθυγράμμιση για το υπόλοιπο κείμενο στο στοιχείο.

Αξίζει επίσης να γνωρίζετε ότι text-align-lastορίζει την ευθυγράμμιση για όλες τις τελευταίες γραμμές εντός του επιλεγμένου στοιχείου και όχι μόνο την απόλυτη τελευταία γραμμή κειμένου. Έτσι, για παράδειγμα, εάν έχετε ένα divμε πέντε παραγράφους σε αυτό, η text-align-lastδήλωσή σας θα ισχύει για την τελευταία γραμμή κάθε παραγράφου.

Εάν θέλετε να χρησιμοποιήσετε text-align-lastμόνο την τελευταία γραμμή του κοντέινερ, ενδέχεται να μπορείτε να χρησιμοποιήσετε :last-childή :last-of-type. Το CSS σας θα μοιάζει με αυτό:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

Στην παρακάτω επίδειξη, η αριστερή εμφάνιση δείχνει text-align-last: center;εφαρμοσμένη σε ένα div με πολλές παραγράφους μέσα σε αυτό. Παρατηρήστε ότι η τελευταία γραμμή κάθε παραγράφου είναι στο κέντρο. Η δεξιά πλευρά δείχνει text-align-last: center;μόνο για την τελευταία παράγραφο μέσα στο div χρησιμοποιώντας :last-child.

Δείτε το στυλό κείμενο-align-last από CSS-Tricks (@ css-tricks) στο CodePen

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

  • στοίχιση κειμένου
  • κείμενο-εσοχή

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

  • text-align-last στο CSS Text Module Level 3 (W3C)
  • text-align-last στο MDN
  • text-align-last στο MSDN
  • text-align-last στο blog της ομάδας πλατφόρμας ιστού της Adobe
  • Webkit Bug 76173, σχετικά με την εφαρμογή του Chrome από το text-align-last

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

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
35+ με πειραματικές σημαίες Όχι 34+ (πρόθεμα) Όχι 5.5+ (πρόθεμα) Όχι Όχι