Η ιδιότητα CSS overflow ελέγχει το τι συμβαίνει με το περιεχόμενο που είναι πιο μεγάλο από τον διαθέσιμο χώρο σε μια περιοχή.
Οι τιμές που μπορεί να πάρει η ιδιότητα overflow είναι:
visible: Το περιεχόμενο που υπερβαίνει τον διαθέσιμο χώρο εμφανίζεται και ξεπερνάει την περιοχή.hidden: Το περιεχόμενο που υπερβαίνει τον διαθέσιμο χώρο κρύβεται και δεν είναι ορατό.scroll: Προσθέτει μια γραμμή κύλισης στην περιοχή για να επιτρέψει στον χρήστη να κυλήσει το περιεχόμενο που υπερβαίνει τον διαθέσιμο χώρο.auto: Η περιοχή επιτρέπει το κύλιση του περιεχομένου μόνο εάν υπερβαίνει τον διαθέσιμο χώρο.
Παράδειγμα:
HTML:
<div class="container"> <p>This is some long content that exceeds the container's width.</p> </div>
CSS:
.container {
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
/* Εμφανίζει μπάρα κύλισης σε περίπτωση που το περιεχόμενο υπερβαίνει τις διαστάσεις του στοιχείου */
overflow: scroll;
}
Σε αυτό το παράδειγμα, ο γονικός περιέκτης .container έχει μια περιορισμένη πλάτος (200px) και ύψος (100px). Με την ιδιότητα overflow: scroll;, προστίθεται μια γραμμή κύλισης στην περιοχή, επιτρέποντας στον χρήστη να κυλήσει το περιεχόμενο που υπερβαίνει τον διαθέσιμο χώρο.
Μπορείτε να προσαρμόσετε την τιμή overflow στις ανάγκες και τον σχεδιασμό του συγκεκριμένου σας περιεχομένου και περιοχής.
Η προεπιλεγμένη τιμή της ιδιότητας overflow είναι visible, που σημαίνει ότι το περιεχόμενο δεν αποκοπτείται και απεικονίζεται έξω από το πλαίσιο του στοιχείου.
[adinserter block=”2″]
Παράδειγμα:
HTML:
<div class="container"> <p>This is some long content that exceeds the container's width.</p> </div>
CSS:
.container {
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
/* Καθορίζει την ορατότητα του περιεχομένου που υπερβαίνει τα όρια του στοιχείου */
overflow: visible;
}
Σε αυτό το παράδειγμα, ο γονικός περιέκτης .container έχει μια περιορισμένη πλάτος (200px) και ύψος (100px). Με την ιδιότητα overflow: visible;, το περιεχόμενο που υπερβαίνει αυτά τα όρια θα εμφανίζεται έξω από την περιοχή του .container.
Είναι σημαντικό να σημειωθεί ότι η τιμή visible είναι η προεπιλογή, επομένως αν δεν καθορίσετε κάποια τιμή για το overflow, θα χρησιμοποιηθεί αυτή η τιμή από προεπιλογή.
Με την τιμή hidden στην ιδιότητα overflow, το περιεχόμενο που υπερβαίνει τα όρια του στοιχείου αποκοπτείται και το υπόλοιπο περιεχόμενο παραμένει κρυμμένο.
Παράδειγμα:
HTML:
<div class="container"> <p>This is some long content that exceeds the container's width.</p> </div>
CSS:
.container {
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
/* Αποκρύπτει την περιττή περιεχόμενη περιοχή και εφαρμόζει απόκρυψη κύλισης αν υπερβαίνεται η διαθέσιμη περιοχή */
overflow: hidden;
}
Σε αυτό το παράδειγμα, ο γονικός περιέκτης .container έχει μια περιορισμένη πλάτος (200px) και ύψος (100px). Με την ιδιότητα overflow: hidden;, το περιεχόμενο που υπερβαίνει αυτά τα όρια θα αποκοπεί και δεν θα είναι ορατό. Οποιοδήποτε περιεχόμενο που βρίσκεται εκτός των ορίων του .container θα κρυφτεί.
Μπορείτε να προσαρμόσετε την τιμή overflow στις ανάγκες και τον σχεδιασμό του συγκεκριμένου σας στοιχείου.
Με την τιμή scroll στην ιδιότητα overflow, το περιεχόμενο που υπερβαίνει τα όρια του στοιχείου αποκοπτείται και προστίθεται μια γραμμή κύλισης για να επιτρέπεται η κύλιση εντός του πλαισίου. Σημειώστε ότι αυτό θα προσθέσει μια γραμμή κύλισης τόσο οριζόντια όσο και κατακόρυφα (ακόμη κι αν δεν χρειάζεστε και τις δύο).
Παράδειγμα:
HTML:
<div class="container"> <p>This is some long content that exceeds the container's width.</p> </div>
CSS:
.container {
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
/* Ορίζει την κύλιση (scroll) όταν το περιεχόμενο είναι μεγαλύτερο από το ύψος του στοιχείου */
overflow: scroll;
}
Σε αυτό το παράδειγμα, ο γονικός περιέκτης .container έχει μια περιορισμένη πλάτος (200px) και ύψος (100px). Με την ιδιότητα overflow: scroll;, το περιεχόμενο που υπερβαίνει αυτά τα όρια θα αποκοπεί και θα προστεθεί μια γραμμή κύλισης για να επιτρέπεται η κύλιση του περιεχομένου εντός του .container.
[adinserter block=”3″]
Είναι σημαντικό να σημειωθεί ότι η τιμή scroll θα προσθέσει μια γραμμή κύλισης ακόμη και αν δεν είναι απαραίτητη, επομένως η γραμμή κύλισης θα εμφανίζεται πάντα, ακόμη και όταν το περιεχόμενο χωράει πλήρως μέσα στο πλαίσιο.
Η τιμή auto στην ιδιότητα overflow είναι παρόμοια με την τιμή scroll, αλλά προσθέτει γραμμές κύλισης μόνο όταν είναι απαραίτητο.
Παράδειγμα:
HTML:
<div class="container"> <p>This is some long content that exceeds the container's width.</p> </div>
CSS:
.container {
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
/* Εμφανίζει μια οριζόντια και μια κατακόρυφη γραμμή κύλισης, αν χρειαστεί */
overflow: auto;
}
Σε αυτό το παράδειγμα, ο γονικός περιέκτης .container έχει μια περιορισμένη πλάτος (200px) και ύψος (100px). Με την ιδιότητα overflow: auto;, το περιεχόμενο που υπερβαίνει αυτά τα όρια θα αποκοπεί, αλλά οι γραμμές κύλισης θα προστίθενται μόνο όταν είναι απαραίτητες. Αν το περιεχόμενο χωράει πλήρως μέσα στο πλαίσιο, δεν θα εμφανιστούν γραμμές κύλισης.
Με την τιμή auto, το περιεχόμενο εξακολουθεί να αποκόπτεται όταν υπερβαίνει τον διαθέσιμο χώρο, αλλά οι γραμμές κύλισης προστίθενται μόνο όταν είναι απαραίτητο, εξαρτώμενες από το περιεχόμενο και τον διαθέσιμο χώρο.
Οι ιδιότητες overflow-x και overflow-y χρησιμοποιούνται για να καθορίσουν τον τρόπο με τον οποίο θα αλλάξει η προεπιλεγμένη συμπεριφορά του περιεχομένου σε οριζόντια ή κατακόρυφη κατεύθυνση (ή και τις δύο).
Η ιδιότητα overflow-x καθορίζει τη συμπεριφορά στα αριστερά/δεξιά άκρα του περιεχομένου, ενώ η ιδιότητα overflow-y καθορίζει τη συμπεριφορά στα πάνω/κάτω άκρα του περιεχομένου.
Παράδειγμα:
HTML:
<div class="container"> <p>This is some long content that exceeds the container's width and height.</p> </div>
CSS:
.container {
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
/* Ενεργοποιεί την οριζόντια κύλιση */
overflow-x: scroll;
/* Απενεργοποιεί την κατακόρυφη κύλιση */
overflow-y: hidden;
}
Σε αυτό το παράδειγμα, ο γονικός περιέκτης .container έχει μια περιορισμένη πλάτος (200px) και ύψος (100px). Με την ιδιότητα overflow-x: scroll;, προστίθεται μια γραμμή κύλισης μόνο στον οριζόντιο άξονα, ενώ με την ιδιότητα overflow-y: hidden;, το περιεχόμενο αποκόπτεται και κρύβεται στον κατακόρυφο άξονα. Μπορείτε να προσαρμόσετε τις τιμές των ιδιοτήτων overflow-x και overflow-y σύμφωνα με τις ανάγκες και τον σχεδιασμό σας.