Υπερχείλιση (Overflow)
Σε ένα στοιχείο με ορισμένες διαστάσεις, όταν το περιεχόμενο είναι μεγάλο και δεν χωράει στις διαστάσεις του στοιχείου τότε έχουμε υπερχείλιση
.
Με την ιδιότητα overflow
και τις παρακάτω τιμές μπορείτε να διαχειριστείτε το overflow.
/* Keyword values */ overflow: visible; overflow: hidden; overflow: scroll; overflow: auto;
Η τιμή visible
είνα η προκαθορισμένη. Με την hidden
το επιπλέον περιεχόμενο κρύβεται. Με την τιμή auto
εμφανίζεται η γραμμή κύλισης όταν υπάρχει overflow και τέλος με την τιμή scroll
εμφανίζονται οι γραμμές κύλισης ενεργές ή ανενεργές ανάλογα αν υπάρχει υπερχείλιση ή όχι.
Στο παρακάτω στοιχείο με διαστάσεις 300x200 pixels το περιεχόμενο κείμενο δεν χωράει και έχουμε υπερχείλιση.
<html> <head> <meta charset="UTF-8"> <style> div { width: 300px; height: 200px; background-color: lightcyan; } </style> </head> <body> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nihil repudiandae quos iusto veritatis aperiam officiis molestias rem, sed vel, sit nobis, impedit ad commodi. Cupiditate doloribus repudiandae, cum incidunt dicta maiores explicabo ipsum error voluptas nihil odit exercitationem, alias facilis consectetur ad itaque iste provident commodi ex. Obcaecati molestiae vel error voluptatem, qui eaque incidunt? </div> </body> </html>
Στο παρακάτω στοιχείο με διαστάσεις 300x200 pixels το περιεχόμενο κείμενο δεν χωράει και έχουμε υπερχείλιση αλλά έχει προστεθεί η ιδιότητα: overflow: auto
.
<html> <head> <meta charset="UTF-8"> <style> div { width: 300px; height: 200px; background-color: lightcyan; overflow: auto; } </style> </head> <body> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nihil repudiandae quos iusto veritatis aperiam officiis molestias rem, sed vel, sit nobis, impedit ad commodi. Cupiditate doloribus repudiandae, cum incidunt dicta maiores explicabo ipsum error voluptas nihil odit exercitationem, alias facilis consectetur ad itaque iste provident commodi ex. Obcaecati molestiae vel error voluptatem, qui eaque incidunt? </div> </body> </html>