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

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

Υπερχείλιση στην 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;
}

Αποτέλεσμα

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

Hidden

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

Παράδειγμα

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

Αποτέλεσμα

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

Scroll

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

Παράδειγμα

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

Αποτέλεσμα

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

Auto

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

Παράδειγμα

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

Αποτέλεσμα

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

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

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.