Υπερχείλιση στην CSS (CSS Overflow)

Με την ιδιότητα overflow στη CSS (Υπερχείλιση στην CSS) μπορούμε να ορίσουμε αν το περιεχόμενο ενός στοιχείου θα κοπεί ή θα προστεθούν μπάρες κύλισης, όταν το περιεχόμενο του στοιχείου είναι πολύ μεγάλο για να χωρέσει σε μια συγκεκριμένη περιοχή.

Η ιδιότητα overflow μπορεί να πάρει τις εξής τιμές:

visible
hidden
scroll
auto
overflow-x
overflow-y

Η ιδιότητα overflow λειτουργεί μόνο σε στοιχεία μπλοκ (block elements) με καθορισμένο ύψος.

Visible

Με την ιδιότητα visible η υπερχείλιση του περιεχομένου δεν ψαλιδίζεται και το περιεχόμενο που υπάρχει εκτός πλαισίου του στοιχείου είναι ορατό.

Παράδειγμα

div {
  width: 200px;
  height: 80px;
  background-color: #eee;
  overflow: visible;
}

Αποτέλεσμα

Hidden

Με την ιδιότητα hidden η υπερχείλιση του περιεχομένου ψαλιδίζεται και το περιεχόμενο που υπάρχει εκτός πλαισίου του στοιχείου δεν είναι ορατό.

Παράδειγμα

div {
  background-color: #eee;
  width: 200px;
  height: 80px;
  border: 1px dotted black;
  overflow: hidden;
}

Αποτέλεσμα

Scroll

Με την ιδιότητα scroll η υπερχείλιση του περιεχομένου ψαλιδίζεται και προστίθενται μπάρες κύλισης μέσα στο στοιχείο που βρίσκεται το περιεχόμενο. Οι μπάρες κύλισης είναι μία οριζόντια και μία κάθετη, ακόμα και όταν δε χρειάζονται και οι δύο.

Παράδειγμα

div {
  background-color: #eee;
  width: 200px;
  height: 80px;
  border: 1px dotted black;
  overflow: scroll;
}

Αποτέλεσμα

Auto

Η ιδιότητα auto λειτουργεί παρόμοια με την ιδιότητα scroll, με την διαφορά ότι προσθέτει μπάρες μόνο όταν είναι απαραίτητο.

Παράδειγμα

div {
  background-color: #eee;
  width: 200px;
  height: 80px;
  border: 1px dotted black;
  overflow: auto;
}

Αποτέλεσμα

Overflow-x και Overflow-y

Με την ιδιότητα overflow-x ορίζουμε την οριζόντια υπερχείλιση, δηλαδή τι θα γίνει με τα αριστερά και δεξιά άκρα του περιεχομένου.

Με την overflow-y ορίζουμε την κάθετη υπερχείλιση, δηλαδή τι θα γίνει με τα πάνω και κάτω άκρα του περιεχομένου.

Μπορούμε επίσης να ορίσουμε και τις δύο υπερχειλίσεις σε ένα στοιχείο.

Παράδειγμα

div {
  background-color: #eee;
  width: 200px;
  height: 80px;
  border: 1px dotted black;
  overflow-x: hidden;
  overflow-y: scroll;
}

Αποτέλεσμα

Υπερχείλιση στην CSS (CSS Overflow)