Υπερχείλιση Μπλοκ στο CSS

overflowoverflow-xoverflow-y
Задание 1

Δημιουργήστε ένα div με πλάτος και ύψος 200px. Προσθέστε σε αυτό ένα μακρύ κείμενο που δεν θα χωράει σε ύψος σε αυτό το μπλοκ. Ελέγξτε ότι το κείμενο θα βγει από το κάτω μέρος του μπλοκ.

Задание 2

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε στο div, όταν το κείμενο ξεχειλίζει σε ύψος, να εμφανίζεται μια κάθετη γραμμή κύλισης.

Задание 3

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε το κείμενο που ξεχειλίζει κάθετα να περικόπτεται.

Задание 4

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε όταν το ποντίκι περνάει πάνω από το div, το ύψος του div να γίνεται αρκετά μεγάλο ώστε σε αυτό το div να χωράει όλο το κείμενο.

Задание 5

Δημιουργήστε ένα div με πλάτος και ύψος 300px. Προσθέστε στο div μας μια εικόνα, που θα είναι μεγαλύτερη από το div σε πλάτος και σε ύψος. Ελέγξτε ότι η εικόνα θα βγαίνει έξω από τα όρια του div.

Задание 6

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε όταν η εικόνα ξεχειλίζει, να εμφανίζονται γραμμές κύλισης.

Задание 7

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε τα τμήματα της εικόνας που ξεχειλίζουν να περικόπτονται.

Задание 8

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε τα τμήματα της εικόνας που ξεχειλίζουν οριζόντια να περικόπτονται, ενώ κάθετα να εμφανίζεται μια γραμμή κύλισης.

Задание 9

Δημιουργήστε ένα div με πλάτος και ύψος 150px. Ρυθμίστε το έτσι ώστε ανεξάρτητα από το περιεχόμενο του div, να υπάρχει πάντα μια κάθετη γραμμή κύλισης.