Ιδιότητα overflow
Η ιδιότητα overflow καθορίζει στο πρόγραμμα περιήγησης,
πώς να χειριστεί το περιεχόμενο (κείμενο, εικόνες,
άλλα μπλοκ) που ξεπερνά τα όρια
του μπλοκ (πέρα από το πλάτος ή το ύψος του). Το πρόγραμμα περιήγησης
μπορεί να κρύψει το τμήμα που ξεπερνά, να προσθέσει γραμμές
κύλισης ή να μην κάνει τίποτα (να το αφήσει
ως έχει - να εξέχει έξω από τα όρια).
Σύνταξη
επιλογέας {
overflow: hidden | scroll | auto | visible;
}
Τιμές
| Τιμή | Περιγραφή |
|---|---|
hidden |
Κρύβει το περιεχόμενο που ξεπερνά τα όρια του μπλοκ. |
scroll |
Προσθέτει γραμμές κύλισης, και πάντα, ακόμα και αν τίποτα δεν ξεπερνά (σε αυτήν την περίπτωση θα είναι ανενεργές). |
auto |
Προσθέτει γραμμές κύλισης όταν είναι απαραίτητο: εάν το περιεχόμενο δεν χωράει - θα εμφανιστούν, εάν όλα χωράνε - δεν θα υπάρχουν. |
visible |
Δεν κρύβει το περιεχόμενο που ξεπερνά τα όρια του μπλοκ. |
Προεπιλεγμένη τιμή: visible.
Παράδειγμα . Τιμή visible
Σε αυτό το παράδειγμα, μια πολύ μεγάλη λέξη δεν θα χωρέσει στο δοχείο και θα ξεπεράσει τα όριά του. Δεν γίνεται αποκοπή:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
overflow: visible;
border: 1px solid red;
width: 200px;
}
:
Παράδειγμα . Τιμή visible
Και τώρα περιορίζεται όχι μόνο το πλάτος, αλλά και το ύψος (το κείμενο θα ξεπεράσει το μπλοκ και σε ύψος):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
width: 200px;
height: 40px;
overflow: visible;
border: 1px solid red;
margin-bottom: 20px;
}
:
Παράδειγμα . Τιμή hidden
Τώρα ό,τι ξεπερνά τα όρια του δοχείου απλώς θα αποκοπεί (και σε ύψος επίσης). Προσέξτε ότι η αποκοπή σε ύψος συμβαίνει μόνο όταν αυτό έχει οριστεί ρητά. Σε αντίθετη περίπτωση το κείμενο επεκτείνει το δοχείο σε ύψος - και δεν θα γίνει καμία αποκοπή:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
overflow: hidden;
width: 200px;
height: 40px;
border: 1px solid red;
}
:
Παράδειγμα . Τιμή scroll
Με την τιμή scroll οι γραμμές κύλισης
θα υπάρχουν πάντα, ακόμα και αν τίποτα δεν ξεπερνά
(σε αυτήν την περίπτωση θα είναι ανενεργές). Τώρα
το κείμενο δεν ξεπερνά ούτε σε πλάτος, ούτε σε ύψος,
αλλά οι γραμμές κύλισης εξακολουθούν να υπάρχουν (ανενεργές):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
overflow: scroll;
width: 400px;
height: 100px;
border: 1px solid red;
}
:
Παράδειγμα . Τιμή auto
Με την τιμή auto οι γραμμές κύλισης
προστίθενται μόνο εάν το περιεχόμενο ξεπερνά
το δοχείο. Τώρα δεν υπάρχουν, αφού όλα
χωράνε:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
overflow: auto;
width: 400px;
height: 100px;
border: 1px solid red;
}
:
Παράδειγμα . Τιμή auto
Και τώρα ας περιορίσουμε το πλάτος - θα εμφανιστεί οριζόντια γραμμή κύλισης:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
width: 200px;
overflow: auto;
height: 100px;
border: 1px solid red;
}
:
Δείτε επίσης
-
η ιδιότητα
word-break,
που μεταφέρει τα γράμματα μιας μεγάλης λέξης σε νέα γραμμή -
η ιδιότητα
overflow-wrap,
που μεταφέρει τα γράμματα μιας μεγάλης λέξης σε νέα γραμμή -
η ιδιότητα
overflow-x,
που αποκόπτει τα τμήματα που ξεπερνούν οριζόντια -
η ιδιότητα
overflow-y,
που αποκόπτει τα τμήματα που ξεπερνούν κάθετα