Η overflowιδιότητα ελέγχει τι συμβαίνει σε περιεχόμενο που ξεπερνά τα όριά του: φανταστείτε ένα divστο οποίο έχετε ορίσει ρητώς πλάτος 200 εικονοστοιχεία, αλλά περιέχει μια εικόνα πλάτους 300 εικονοστοιχείων. Αυτή η εικόνα θα βγει από το div και θα είναι visibleαπό προεπιλογή. Ενώ εάν ορίσετε την overflowτιμή hidden, η εικόνα θα σταματήσει στα 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Αξίες
visible: το περιεχόμενο δεν κόβεται όταν προχωρά έξω από το κουτί του. Αυτή είναι η προεπιλεγμένη τιμή της ιδιότηταςhidden: το περιεχόμενο υπερχείλισης θα είναι κρυφό.scroll: παρόμοιο με το κρυφό εκτός από τους χρήστες που θα μπορούν να κάνουν κύλιση στο κρυφό περιεχόμενοauto: εάν το περιεχόμενο προχωρά έξω από το κουτί του, τότε αυτό το περιεχόμενο θα είναι κρυφό, ενώ μια γραμμή κύλισης θα πρέπει να είναι ορατή για τους χρήστες να διαβάσουν το υπόλοιπο περιεχόμενο.initial: χρησιμοποιεί την προεπιλεγμένη τιμή που είναιvisibleinherit: ορίζει την υπερχείλιση στην τιμή του γονικού στοιχείου.
Θυμηθείτε ότι το κείμενο θα τυλίξει φυσικά στο τέλος ενός στοιχείου (εκτός εάν αλλάξει κενό διάστημα), έτσι το κείμενο σπάνια θα είναι η αιτία υπερχείλισης. Εάν δεν έχει οριστεί ύψος, το κείμενο θα ωθήσει επίσης ένα στοιχείο ψηλότερο. Η υπερχείλιση εμφανίζεται πιο συχνά όταν ορίζονται ρητά πλάτη και ύψη και θα ήταν ανεπιθύμητο να χυθεί οποιοδήποτε περιεχόμενο ή όταν αποφεύγεται η κύλιση.
Ορατός
Εάν δεν ρυθμίσετε καθόλου την ιδιότητα υπερχείλισης, η προεπιλογή είναι ορατή. Σε γενικές γραμμές, λοιπόν, δεν υπάρχει λόγος να ορίσετε ρητά αυτήν την ιδιότητα, εκτός εάν την παρακάμψετε να οριστεί αλλού.
Το σημαντικό πράγμα που πρέπει να θυμάστε εδώ είναι ότι παρόλο που το περιεχόμενο είναι ορατό έξω από το κουτί, αυτό το περιεχόμενο δεν επηρεάζει τη ροή της σελίδας. Για παράδειγμα:
Σε γενικές γραμμές, δεν πρέπει να ρυθμίζετε στατικά ύψη σε κουτιά με κείμενο ιστού σε αυτά ούτως ή άλλως, οπότε δεν πρέπει να εμφανίζεται.
Κρυμμένος
Το αντίθετο του προεπιλεγμένου ορατού είναι κρυμμένο . Αυτό κρύβει κυριολεκτικά οποιοδήποτε περιεχόμενο που εκτείνεται πέρα από το κουτί.
Αυτό είναι ιδιαίτερα χρήσιμο σε χρήση με δυναμικό περιεχόμενο και την πιθανότητα υπερχείλισης που προκαλεί σοβαρά προβλήματα διάταξης. Ωστόσο, λάβετε υπόψη ότι το περιεχόμενο που κρύβεται με αυτόν τον τρόπο είναι εντελώς απρόσιτο (δεν βλέπει την πηγή). Έτσι, για παράδειγμα, ένας χρήστης έχει το προεπιλεγμένο μέγεθος γραμματοσειράς μεγαλύτερο από αυτό που θα περίμενε κανείς.
Πάπυρος
Ο ορισμός της τιμής υπερχείλισης ενός πλαισίου για κύλιση θα αποκρύψει το περιεχόμενο από την απόδοση εκτός του πλαισίου, αλλά θα προσφέρει γραμμές κύλισης για κύλιση στο εσωτερικό του πλαισίου για προβολή του περιεχομένου.
Σημειωτέον με αυτήν την τιμή είναι ότι λαμβάνετε και οι δύο οριζόντιες και κάθετες γραμμές κύλισης, ανεξάρτητα από το τι, ακόμα κι αν το περιεχόμενο απαιτεί μόνο το ένα ή το άλλο.
Η ορμή κύλισης του iOS μπορεί να ενεργοποιηθεί για αυτήν την τιμή με -webkit-overflow-scrolling.
Σημείωση: Στο OS X Lion, όταν οι γραμμές κύλισης έχουν ρυθμιστεί ώστε να εμφανίζονται μόνο όταν χρησιμοποιούνται, scrollσυμπεριφέρεται περισσότερο auto, καθώς θα εμφανίζονται μόνο οι γραμμές κύλισης που χρειάζονται.
Αυτο
Η αυτόματη υπερχείλιση είναι πολύ παρόμοια με την τιμή κύλισης, μόνο επιλύει το πρόβλημα της λήψης γραμμών κύλισης όταν δεν τις χρειάζεστε. Οι γραμμές κύλισης θα εμφανίζονται μόνο εάν υπάρχει περιεχόμενο που ξεσπά στην πραγματικότητα από το στοιχείο.
overflow-x και overflow-y
Είναι επίσης δυνατό να χειριστεί την υπερχείλιση περιεχομένου οριζόντια ή κάθετα με τις ιδιότητες overflow-xκαι overflow-y. Για παράδειγμα, στην επίδειξη κάτω από την οριζόντια υπερχείλιση μπορείτε να κάνετε κύλιση, ενώ το κείμενο που εκτείνεται πέρα από το ύψος του κουτιού είναι κρυμμένο:
.box ( overflow-y: hidden; overflow-x: scroll; )Εκκαθάριση Float
Μία από τις πιο δημοφιλείς χρήσεις της ρύθμισης υπερχείλισης, παραδόξως, είναι το float clearing. Η ρύθμιση της υπερχείλισης δεν καθαρίζει το float στο στοιχείο, αλλά αυτοκαθαρίζεται. Αυτό σημαίνει ότι το στοιχείο με υπερχείλιση (οποιαδήποτε τιμή εκτός visible) θα επεκταθεί τόσο μεγάλο όσο χρειάζεται για να συμπεριλάβει θυγατρικά στοιχεία μέσα που είναι αιωρούμενα (αντί για κατάρρευση), υποθέτοντας ότι το ύψος δεν δηλώνεται. Σαν αυτό:
Μια καλύτερη τεχνική εκκαθάρισης float είναι το clearfix, καθώς δεν απαιτεί από εσάς να αλλάξετε την ιδιότητα υπερχείλισης με τρόπο που δεν χρειάζεστε.
Δημιουργία πλαισίου μορφοποίησης μπλοκ
Είναι ενδιαφέρον να σημειωθεί ότι overflowθα δημιουργήσει επίσης ένα νέο πλαίσιο μορφοποίησης μπλοκ που θα είναι χρήσιμο αν θέλουμε να ευθυγραμμίσουμε ένα στοιχείο μπλοκ δίπλα σε ένα κινούμενο. Στο παρακάτω παράδειγμα δείχνουμε πώς μια σειρά παραγράφων θα αλληλεπιδράσουν με μια αιωρούμενη εικόνα από προεπιλογή και στη συνέχεια χρησιμοποιούμε overflow: hiddenγια να ευθυγραμμίσουμε το κείμενο μέσα στο δικό του πλαίσιο:
Αυτό προέρχεται από μια υπέροχη ανάρτηση της Nicole Sullivan, η οποία συνέχισε να εμπνέει το αντικείμενο των μέσων ενημέρωσης.
Μπορούν να διαμορφωθούν γραμμές κύλισης με CSS;
Συνήθιζες να σχεδιάζεις γραμμές κύλισης στο IE (v5.5?) Αλλά όχι περισσότερο. Μπορείτε να τα διαμορφώσετε ξανά στα προγράμματα περιήγησης WebKit. Εάν χρειάζεστε προσαρμοσμένες γραμμές κύλισης μεταξύ προγραμμάτων περιήγησης, μεταβείτε στο JavaScript.
Εάν ένα στοιχείο πρέπει να έχει προσαρτήσει γραμμές κύλισης για να τιμήσει την τιμή υπερχείλισης, ο Firefox τις τοποθετεί έξω από το στοιχείο, διατηρώντας το ορατό πλάτος / ύψος όπως δηλώνεται. Το IE βάζει τις γραμμές κύλισης μέσα, διατηρώντας το συνολικό πλάτος / ύψος όπως δηλώνεται.
Διαδήλωση
Επιδείξεις για αυτό το άρθρο λαμβάνονται από αυτό το δείγμα σελίδας.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | ΤΡ |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Σχετιζομαι με
- Η πλωτή ιδιοκτησία
Περισσότερες πληροφορίες
- Κατανόηση του Humble Clearfix
- Υπερχείλιση: ένα μυστικό όφελος
- Υπερχείλιση στο MDN
- Υπερχείλιση στο W3C
- Εύρεση / διόρθωση ακούσιας υπερχείλισης σώματος