Σφιγκτήρας γραμμής - CSS-Κόλπα

Η line-clampιδιότητα περικόπτει κείμενο σε συγκεκριμένο αριθμό γραμμών.

Οι προδιαγραφές για αυτήν τη στιγμή είναι ένα Πρόχειρο Πρόχειρου, έτσι δεν σημαίνει ότι τίποτα εδώ δεν έχει τεθεί σε πέτρα επειδή είναι ένα έργο σε εξέλιξη. Τούτου λεχθέντος, ορίζεται ως συντομογραφία max-linesκαι block-overflow, το πρώτο του οποίου σημειώνεται ότι κινδυνεύει να πέσει στη Σύσταση υποψηφίων.

Είναι εύκολο να καταλάβετε πώς max-linesθα ήταν αδερφό αφού η λειτουργία του (καθορισμός του αριθμού των γραμμών πριν από την περικοπή) έχει ήδη ψηθεί line-clampκαι οποιαδήποτε περαιτέρω αφαίρεση μπορεί να είναι περιττή Αλλά αυτό μας κάνει να μην έχουμε τροχιά, οπότε ας προχωρήσουμε.

Σύνταξη

.module ( line-clamp: (none | ); )

line-clamp αποδέχεται τις ακόλουθες τιμές στο τρέχον προσχέδιο της προδιαγραφής:

none: δεν ορίζει μέγιστο τον αριθμό των γραμμών και συνεπώς δεν θα υπάρξει περικοπή.
: ορίζει τον μέγιστο αριθμό γραμμών πριν από την περικοπή του περιεχομένου και στη συνέχεια εμφανίζει μια έλλειψη (…) στο τέλος της τελευταίας γραμμής.

Αυτή η έλλειψη θα πρέπει να αποδίδεται ως χαρακτήρας Unicode (U + 2026) αλλά θα μπορούσε να αντικατασταθεί από ισοδύναμο με βάση τη γλώσσα περιεχομένου και τη λειτουργία γραφής του Χρήστη-Πράκτορα που χρησιμοποιείται.

Γεια, δεν μπορώ να το κάνω με υπερχείλιση κειμένου;

Δίκαιη ερώτηση, φίλε μου, και η απάντηση είναι, καλά…

(Δείτε τι έκανα εκεί;)

... κάπως.

text-overflowέχει πράγματι μια ellipsisτιμή που θα περικόψει το κείμενο:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Δείτε το κείμενο Pen υπερχείλισης του Geoff Graham (@geoffgraham) στο CodePen.

Ωραία ωραία, αυτή είναι μια καλή αρχή. Τι γίνεται όμως αν θέλουμε να παρουσιάσουμε την έλλειψη όχι στην πρώτη γραμμή αλλά κάπου, ας πούμε, την τρίτη γραμμή κειμένου;

Εκεί line-clampμπαίνει το παιχνίδι. Απλώς σημειώστε ότι χρησιμοποιείται ένας συνδυασμός τριών ιδιοτήτων για να συμβεί:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Δείτε το στυλό γραμμής Pen (-webkit) του Geoff Graham (@geoffgraham) στο CodePen.

Ο Firefox το υποστηρίζει τώρα, ακριβώς με αυτόν τον τρόπο (με τα -webkit-προθέματα και όλα).

Λοιπόν, ποια είναι η παγίδα;

Από τώρα, είναι η υποστήριξη του προγράμματος περιήγησης. Οι σφιγκτήρες γραμμής αποτελούν μέρος του CSS Overflow Module Level 3, το οποίο βρίσκεται επί του παρόντος στο Πρόχειρο του Editor και δεν υποστηρίζεται πλήρως αυτήν τη στιγμή.

Μπορούμε να κάνουμε κάποια δράση σύσφιξης γραμμών με ένα -webkit-πρόθεμα (το οποίο, παράξενα, λειτουργεί σε όλα τα μεγάλα προγράμματα περιήγησης). Στην πραγματικότητα, έτσι έγινε το παραπάνω demo.

Θα θέλαμε να ακολουθήσουμε τη διαδρομή JavaScript αν θέλουμε. Το Clamp.js θα κάνει το κόλπο:

Δείτε το στυλό γραμμής Pen (clamp.js) του Geoff Graham (@geoffgraham) στο CodePen.

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

Αυτή είναι η υποστήριξη για την ορθότητα και την παράνομη εφαρμογή του σφιγκτήρα γραμμής του WebKit.

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