Δημιουργήστε ένα πλαίσιο με κύλιση κειμένου χρησιμοποιώντας CSS και HTML
Ένα πλαίσιο κύλισης HTML είναι ένα πλαίσιο που προσθέτει γραμμές κύλισης στη δεξιά και την κάτω πλευρά, όταν τα περιεχόμενα του κουτιού είναι μεγαλύτερα από τις διαστάσεις του κουτιού. Με άλλα λόγια, εάν έχετε ένα κουτί που μπορεί να χωρέσει περίπου 50 λέξεις, και έχετε κείμενο 200 λέξεων, ένα πλαίσιο κύλισης HTML θα τοποθετήσει τις γραμμές κύλισης μέχρι να σας αφήσει να δείτε τις επιπλέον 150 λέξεις. Σε πρότυπο κώδικα HTML που απλώς σπρώχνει το επιπλέον κείμενο έξω από το κουτί.
Κάνοντας HTML μετακίνηση είναι αρκετά εύκολο. Απλά πρέπει να ρυθμίσετε το πλάτος και το ύψος του στοιχείου που θέλετε να μετακινηθείτε και στη συνέχεια να χρησιμοποιήσετε την ιδιότητα υπερχείλισης CSS για να ορίσετε τον τρόπο με τον οποίο θέλετε να εμφανιστεί η κύλιση.
Τι να κάνετε με επιπλέον κείμενο;
Όταν έχετε περισσότερο κείμενο απ 'ότι θα ταιριάζει στο χώρο της διάταξης, έχετε μερικές επιλογές:
- Επανατοποθετήστε το κείμενο έτσι ώστε να είναι μικρότερο και να ταιριάζει.
- Αφήστε το κείμενο να ρέει πέρα από τα όρια και ελπίζουμε ότι η διάταξη μπορεί να λυγίσει για να την υποστηρίξει.
- Κόψτε το κείμενο όπου υπερχειλίζει.
- Προσθέστε γραμμές κύλισης (συνήθως κάθετες για κείμενο), έτσι ώστε ο χώρος να μετακινηθεί για να εμφανιστεί το επιπλέον κείμενο.
Η καλύτερη επιλογή είναι συνήθως η τελευταία επιλογή: δημιουργήστε ένα πλαίσιο κειμένου κύλισης. Στη συνέχεια, μπορείτε να διαβάσετε επιπλέον κείμενο, αλλά το σχέδιό σας δεν παραβιάζεται.
HTML και CSS για αυτό θα ήταν:
Η υπερχείλιση: αυτόματη. λέει στο πρόγραμμα περιήγησης να προσθέσει γραμμές κύλισης, αν είναι απαραίτητες για να κρατήσει το κείμενο από την υπερχείλιση των ορίων του div. Αλλά για να λειτουργήσει αυτό, χρειάζεστε επίσης τις ιδιότητες στυλ πλάτους και ύψους που έχουν οριστεί στο div, έτσι ώστε να υπάρχουν όρια υπερχείλισης.
Μπορείτε επίσης να διακόψετε το κείμενο αλλάζοντας υπερχείλιση: αυτόματα. για υπερχείλιση: κρυφή ·. Εάν αφήσετε την ιδιότητα υπερχείλισης, το κείμενο θα περάσει στα όρια του div.
Μπορείτε να προσθέσετε γραμμές κύλισης σε περισσότερα από απλά κείμενα
Εάν έχετε μια μεγάλη εικόνα που θέλετε να εμφανίσετε σε μικρότερο χώρο, μπορείτε να προσθέσετε γραμμές γύρω από αυτό με τον ίδιο τρόπο όπως και με το κείμενο.
Σε αυτό το παράδειγμα, η εικόνα 400x509 βρίσκεται μέσα σε μια παράγραφο 300x300.
Οι πίνακες μπορούν να επωφεληθούν από τις κύλινδροι κύλισης
Οι μακρινοί πίνακες πληροφοριών μπορούν να γίνουν πολύ δύσκολο να διαβαστούν πολύ γρήγορα, αλλά με την τοποθέτησή τους σε ένα div ενός περιορισμένου μεγέθους και στη συνέχεια την προσθήκη της ιδιότητας υπερχείλισης, μπορείτε να δημιουργήσετε πίνακες με πολλά δεδομένα που δεν καταλαμβάνουν ακραίο χώρο στη σελίδα σας .
Ο ευκολότερος τρόπος είναι ακριβώς όπως με τις εικόνες και το κείμενο, προσθέστε ένα div γύρω από το τραπέζι, ορίστε το πλάτος και το ύψος του div και προσθέστε την ιδιότητα υπερχείλισης:
Ένα πράγμα που συμβαίνει όταν το κάνετε αυτό είναι μια οριζόντια γραμμή κύλισης εμφανίζεται συνήθως επειδή το πρόγραμμα περιήγησης υποθέτει ότι το χρώμιο των ράβδων κύλισης επικαλύπτει τον πίνακα. Υπάρχουν πολλοί τρόποι για να το διορθώσετε από την αλλαγή του πλάτους του πίνακα και άλλων. Αλλά το αγαπημένο μου είναι απλά να απενεργοποιήσω την οριζόντια κύλιση με την υπερχείλιση ιδιότητας CSS 3-x. Απλά προσθέστε υπερχείλιση-x: κρυφό. στο div, και αυτό θα αφαιρέσει την οριζόντια γραμμή κύλισης. Βεβαιωθείτε ότι έχετε δοκιμάσει αυτό, καθώς μπορεί να υπάρχει περιεχόμενο που εξαφανίζεται.
Ο Firefox υποστηρίζει τη χρήση των ετικετών TBODY για υπερχείλιση
Ένα πολύ ωραίο χαρακτηριστικό του προγράμματος περιήγησης Firefox είναι ότι μπορείτε να χρησιμοποιήσετε την ιδιότητα υπερχείλισης σε ετικέτες εσωτερικού πίνακα όπως tbody και thead ή tfoot. Αυτό σημαίνει ότι μπορείτε να ρυθμίσετε τις γραμμές κύλισης στα περιεχόμενα του πίνακα και ότι τα κελιά κελιών παραμένουν αγκυρωμένα πάνω τους. Αυτό λειτουργεί μόνο στον Firefox , το οποίο είναι πολύ κακό, αλλά είναι ωραίο χαρακτηριστικό, αν οι αναγνώστες σας χρησιμοποιούν μόνο τον Firefox. Περιηγηθείτε σε αυτό το παράδειγμα στον Firefox για να δείτε τι εννοώ.