Ιδιότητα 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,
που αποκόπτει τα τμήματα που ξεπερνούν κάθετα