Η block-overflowιδιότητα περικόπτει το κείμενο και υποδεικνύει ότι ακολουθεί περισσότερο περιεχόμενο εισάγοντας μια έλλειψη ή προσαρμοσμένη συμβολοσειρά μετά από μια σειρά γραμμών που ορίζονται από την max-linesιδιότητα.
Η ιδιότητα έχει εισαχθεί στο Πρόχειρο του Προγράμματος του CSS Overflow Module Level 3 προδιαγραφή. Αυτό σημαίνει ότι είναι πειραματικό αυτή τη στιγμή και θεωρείται έργο σε εξέλιξη. Στην πραγματικότητα, μπορείτε να ακολουθήσετε τη συνομιλία που περιλαμβάνει συνομιλία σχετικά με τη μετονομασία της ιδιοκτησίας εντελώς.
Σύνταξη
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow αποδέχεται τις ακόλουθες τιμές:
clip: Δεν εισάγει χαρακτήρα για να υποδείξει περισσότερο κείμενο που θα ακολουθήσει. Αντ 'αυτού, το περιεχόμενο απλώς περικόπτεται και κόβεται στον τελευταίο χαρακτήρα.ellipsis: Εμφανίζει μια έλλειψη (…) στο τέλος της τελευταίας γραμμής. Θα πρέπει να αποδίδεται ως χαρακτήρας Unicode (U + 2026) αλλά θα μπορούσε να αντικατασταθεί από ισοδύναμο με βάση τη γλώσσα περιεχομένου και τη λειτουργία γραφής του Χρήστη-Πράκτορα που χρησιμοποιείται.: Εμφανίζει προσαρμοσμένο κείμενο (π.χ. "Διαβάστε περισσότερα →") στο τέλος της τελευταίας γραμμής. Η προδιαγραφή λέει ότι ο User-Agent μπορεί να αντικαταστήσει τη συμβολοσειρά με ελλειψία εάν η συμβολοσειρά έχει "παράλογο" μήκος.
Και πάλι, όλα αυτά είναι πειραματικά, σε εξέλιξη. Αυτές οι τιμές θα μπορούσαν να αλλάξουν. Ή, θα μπορούσαν να προστεθούν περισσότερα. Για παράδειγμα, υπήρξαν κλήσεις για μια «πιο έξυπνη» έλλειψη που θα μπορούσε να κάνει περισσότερα πράγματα, όπως περικοπή κειμένου στη μέση:
One thing led to another and… yada yada yada, that was that.Χρησιμοποιήστε line-clampγια σύντομο χρονικό διάστημα
Μπορούμε να πάρουμε σχεδόν το ίδιο πράγμα χρησιμοποιώντας το line-clampοποίο είναι στενό για τις ιδιότητες block-overflowκαι max-lines.
Όπως ορίζεται αυτήν τη στιγμή, ωστόσο, line-clampδέχεται μόνο μία αριθμητική τιμή max-linesκαι ορίζει σιωπηρά block-overflowτην ellipsisτιμή. Έτσι, εάν θέλετε να χρησιμοποιήσετε μια προσαρμοσμένη συμβολοσειρά για περικοπή, τότε πρέπει να πάτε με τη μεγάλη φόρμα.
Υποστήριξη προγράμματος περιήγησης
Κανένα προς το παρόν, αλλά μπορείτε να λάβετε κάποια υποστήριξη χρησιμοποιώντας την αποκλειστική εφαρμογή του WebKit line-clamp:
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 14 * | 68 * | Οχι | 17 | 5 * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2.3 * | 5.0-5.1 * |