Αυτό το άρθρο παρουσιάζει τη μέθοδο για να σταματήσετε την υπερχείλιση περιεχομένου και να ενεργοποιήσετε την κύλιση χρησιμοποιώντας CSS.
Πώς να σταματήσετε την υπερχείλιση περιεχομένου και να ενεργοποιήσετε την κύλιση;
Ο σκοπός να αποτραπεί η υπερχείλιση του περιεχομένου είναι το περιεχόμενο να χωράει στο κοντέινερ του και να μην επηρεάζει αρνητικά την απόδοση του ιστότοπου. Μπορεί εύκολα να κατανοήσει το πλαίσιο και μπορεί να βελτιώσει την προσβασιμότητα στο τέλος των χρηστών. Για μια λεπτομερή εξήγηση, ας συζητήσουμε με ένα παράδειγμα:
Βήμα 1: Ενεργοποίηση κύλισης με υπερχείλιση περιεχομένου
Αρχικά, ξεκινήστε με τη δημιουργία ενός πίνακα μέσα στο αρχείο HTML στον οποίο θα εφαρμοστεί το εφέ κύλισης. Ας υποθέσουμε ότι ο πίνακας έχει ήδη δημιουργηθεί και αποτελείται από έξι σειρές και επτά στήλες και ορισμένα εικονικά δεδομένα παρέχονται στον πίνακα:
< τραπέζι >
< tr >
< ου > Κεφάλι 1 < / ου >
< ου > Κεφάλι 2 < / ου >
< ου > Κεφάλι 3 < / ου >
< ου > Κεφάλι 4 < / ου >
< ου > Κεφάλι 5 < / ου >
< ου > Κεφάλι 6 < / ου >
< ου > Κεφάλι 7 < / ου >
< / tr >
< tr >
< td > Σειρά 1 < / td >
< td > Σειρά 1 < / td >
< td > Σειρά 1 < / td >
< td > Σειρά 1 < / td >
< td > Σειρά 1 < / td >
< td > Σειρά 1 < / td >
< td > Σειρά 1 < / td >
< / tr >
< tr >
< td > Σειρά 2 < / td >
< td > Σειρά 2 < / td >
< td > Σειρά 2 < / td >
< td > Σειρά 2 < / td >
< td > Σειρά 2 < / td >
< td > Σειρά 2 < / td >
< td > Σειρά 2 < / td >
< / tr >
< tr >
< td > Σειρά 3 < / td >
< td > Σειρά 3 < / td >
< td > Σειρά 3 < / td >
< td > Σειρά 3 < / td >
< td > Σειρά 3 < / td >
< td > Σειρά 3 < / td >
< td > Σειρά 3 < / td >
< / tr >
< tr >
< td > Σειρά 4 < / td >
< td > Σειρά 4 < / td >
< td > Σειρά 4 < / td >
< td > Σειρά 4 < / td >
< td > Σειρά 4 < / td >
< td > Σειρά 4 < / td >
< td > Σειρά 4 < / td >
< / tr >< tr >
< td > Σειρά 5 < / td >
< td > Σειρά 5 < / td >
< td > Σειρά 5 < / td >
< td > Σειρά 5 < / td >
< td > Σειρά 5 < / td >
< td > Σειρά 5 < / td >
< td > Σειρά 5 < / td >
< / tr >
< tr >
< td > Σειρά 6 < / td >
< td > Σειρά 6 < / td >
< td > Σειρά 6 < / td >
< td > Σειρά 6 < / td >
< td > Σειρά 6 < / td >
< td > Σειρά 6 < / td >
< td > Σειρά 6 < / td >
< / tr >
< / τραπέζι >
Μετά την εκτέλεση του παραπάνω αποσπάσματος κώδικα, η ιστοσελίδα εμφανίζεται ως εξής:
Η έξοδος δείχνει ότι τα δεδομένα πίνακα είναι σε λιγότερο ευανάγνωστη μορφή και ότι αποκτάται πολύς χώρος από τον πίνακα.
Βήμα 2: Ρύθμιση του εφέ υπερχείλισης και κύλισης Στο παραπάνω απόσπασμα κώδικα: Μετά την εκτέλεση του παραπάνω αποσπάσματος κώδικα, η ιστοσελίδα εμφανίζεται ως εξής: Η ιστοσελίδα δείχνει ότι ο πίνακας καταναλώνει τώρα λιγότερο χώρο και εμποδίζει την υπερχείλιση του περιεχομένου. Επιπλέον, το εφέ κύλισης έχει ενεργοποιηθεί. Σημείωση : Με ρύθμιση ' υπερχείλιση: αυτ ' ή ' υπερχείλιση: κύλιση ”, οι χρήστες μπορούν να ενεργοποιήσουν την κύλιση για υπερχειλισμένο περιεχόμενο. Επιπλέον, το ' υπερχείλιση: κρυφός ” μπορεί να χρησιμοποιηθεί για την πλήρη αποφυγή υπερχείλισης. Οι ιδιότητες 'overflow-x' και 'overflow-y' χρησιμοποιούνται για τον έλεγχο της υπερχείλισης και την ενεργοποίηση της κύλισης στον οριζόντιο και τον κατακόρυφο άξονα. Αποτρέπει την υπερχείλιση του περιεχομένου και επιτρέπει την κύλιση για να δημιουργήσει μια διαδραστική σχεδίαση με απόκριση για όλες τις συσκευές. Αυτό το άρθρο έχει δείξει πώς μπορείτε να σταματήσετε την υπερχείλιση περιεχομένου και να ενεργοποιήσετε την κύλιση χρησιμοποιώντας CSS.
Μετά από αυτό, τυλίξτε το τραπέζι με έναν γονέα '
.ξεχείλισμα {
πλάτος : 200 εικονοστοιχεία ;
ύψος : 200 εικονοστοιχεία ;
υπερχείλιση-χ : αυτο ;
υπερχείλιση-υ : αυτο ;
κύλιση-συμπεριφορά : λείος ;
}
συμπέρασμα