☰

Υπερχείλιση (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>

css overflow

Στο παρακάτω στοιχείο με διαστάσεις 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>

css overflow