Κατά τη διάταξη, οι webmasters έχουν περιοδικά μια ερώτηση: πώς θα αναδιπλωθεί το κείμενο; Στις περισσότερες περιπτώσεις, το πρόγραμμα περιήγησης χειρίζεται αυτήν την εργασία από μόνο του. Αλλά μερικές φορές αυτή η διαδικασία πρέπει να τεθεί υπό έλεγχο, ειδικά όταν διαμορφώνονται μεγάλες λέξεις και φράσεις που, αν μεταφερθούν λανθασμένα, χάνουν το νόημά τους.
ιδιότητα αναδίπλωσης λέξης
Στην HTML, υπάρχει μια ειδική ετικέτα για το διαχωρισμό των γραμμών.
. Αλλά η πολύ συχνή χρήση του θεωρείται κακή μορφή μεταξύ των προγραμματιστών και συχνά υποδηλώνει αντιεπαγγελματισμό. Ως απόδειξη, φανταστείτε ότι έχετε ένα λογότυπο και θέλετε κάθε γράμμα να ξεκινά από μια νέα γραμμή:
Το αποτέλεσμα είναι δυσκίνητος και άσχημος κώδικας, από τον οποίο οποιοσδήποτε προγραμματιστής θα έχει ένα πολιτισμικό σοκ. Και τι γίνεται αν θέλετε το λογότυπο να εμφανίζεται οριζόντια στην έκδοση για επιτραπέζιους υπολογιστές, αλλά κάθετα εάν το πλάτος της οθόνης είναι μικρότερο από 550 εικονοστοιχεία; Επομένως, να χρησιμοποιείτε πάντα φύλλα στυλ για να προσαρμόσετε την εμφάνιση των στοιχείων. Επιπλέον, με τη βοήθεια εργαλείων CSS, οι αλλαγές γραμμής πραγματοποιούνται με πιο κομψό τρόπο. Ταυτόχρονα, δεν υπάρχει περιττή σήμανση, η οποία μειώνει μόνο την ταχύτητα φόρτωσης σελίδων.
Η πρώτη ιδιότητα που εξετάζεται για επεξεργασία κειμένου είναι το word-wrap. Χρειάζεται τρεις τιμές: normal, break-all και keep-all. Χρειάζεται μόνο να θυμάστε το break-all για να εργαστείτε. Το Normal είναι η προεπιλογή και δεν έχει νόημα να το προσδιορίσετε. Το Keep-all σημαίνει αποτροπή σπασίματος γραμμής σε ένα έγγραφο CSS. Σχεδιασμένο ειδικά για κινέζικους, ιαπωνικούς και κορεάτικους χαρακτήρες. Επομένως, εάν δεν πρόκειται να δημιουργήσετε ιστολόγιο σε καμία από αυτές τις γλώσσες, δεν θα χρειαστείτε τη δυνατότητα. Επίσης, δεν υποστηρίζεται από το πρόγραμμα περιήγησης Safari και τα κινητά τηλέφωνα iOS.
Για να αντιστοιχίσετε μια νέα γραμμή για κάθε γράμμα στο λογότυπο από το προηγούμενο παράδειγμα χρησιμοποιώντας CSS, πρέπει να γράψετε τον ακόλουθο κώδικα:
P( γραμματοσειρά: έντονη γραφή 30 px Helvetica, sans-serif; πλάτος: 25 px; word-wrap: break-all; )
Το πλάτος και το μέγεθος της γραμματοσειράς επιλέγονται με τέτοιο τρόπο ώστε να υπάρχει αρκετός χώρος μόνο για ένα γράμμα. Το Word-wrap με τιμή break-all λέει στο πρόγραμμα περιήγησης να αναδιπλώνει τη λέξη σε μια νέα γραμμή κάθε φορά. Αυτή η ιδιότητα δεν μπορεί να χαρακτηριστεί αναντικατάστατη. Αλλά θα σας φανεί χρήσιμο όταν σχεδιάζετε μικρά μπλοκ με κείμενο, όπως πεδία σχολίων.
ιδιοκτησία λευκού χώρου
Ένα συνηθισμένο λάθος που κάνουν οι αρχάριοι προγραμματιστές ιστού είναι να προσπαθούν να επεξεργαστούν κείμενο με κενά ή να πατήσουν το πλήκτρο Enter και μετά να αναρωτιούνται γιατί οι προσπάθειές τους δεν εμφανίζονται στη σελίδα. Ανεξάρτητα από το πόσες φορές πατήσετε "Enter", το πρόγραμμα περιήγησης θα το αγνοήσει. Αλλά υπάρχει ένας τρόπος να το κάνετε να εμφανίζει το κείμενο όπως θέλετε και να λάβετε υπόψη όλα τα κενά.
Σε ένα έγγραφο CSS, οι αλλαγές γραμμής, στις οποίες έχει εκχωρηθεί η ιδιότητα λευκού διαστήματος, μπορούν να ρυθμιστούν ώστε να σέβονται τα κενά ή να πατούν το πλήκτρο Enter. Κενό διάστημα με τιμή προγραμμής θα κάνει το πρόγραμμα περιήγησης να δει το Enter στο κείμενο.
Εάν αλλάξετε την προ-γραμμή σε προ-ανατύλιξη στον κώδικα CSS σας, η αναδίπλωση γραμμής θα περιλαμβάνει κενά. Αντίθετα, απενεργοποιήστε οποιαδήποτε αναδίπλωση ορίζοντας την ιδιότητα λευκού διαστήματος στο κείμενο με την τιμή nowrap:
#wrapper p(χρώμα: #FFF; padding: 10px; γραμματοσειρά: bold 16px Helvetica, sans-serif; λευκό διάστημα: nowrap; )
υπερχείλιση κειμένου
Ένα άλλο χρήσιμο εργαλείο για την εργασία με κείμενο είναι η υπερχείλιση κειμένου. Εκτός από την αναδίπλωση γραμμής, η ιδιότητα CSS επιτρέπει την περικοπή περιεχομένου όταν το κοντέινερ είναι γεμάτο. Λαμβάνει δύο τιμές:
- κλιπ - απλώς κόβει το κείμενο.
- ellipsis - προσθέτει μια έλλειψη.
Για να λειτουργήσει η ιδιότητα, το στοιχείο πρέπει επίσης να ρυθμιστεί ώστε να αποτρέπονται οι αλλαγές γραμμής και η υπερχείλιση με μια τιμή hidden.
σύντομες πληροφορίες
Εκδόσεις CSS
| css 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Περιγραφή
Η ιδιότητα λευκού διαστήματος ορίζει τον τρόπο εμφάνισης των διαστημάτων μεταξύ των λέξεων. Υπό κανονικές συνθήκες, οποιοσδήποτε αριθμός διαστημάτων στον κώδικα HTML θα εμφανίζεται ως ένα σε μια ιστοσελίδα. Η εξαίρεση είναι η ετικέτα
Το κείμενο που τοποθετείται σε αυτό το κοντέινερ εμφανίζεται με όλα τα κενά όπως μορφοποιήθηκε από τον χρήστη. Έτσι, το λευκό διάστημα μιμείται τον τρόπο λειτουργίας της ετικέταςΑλλά σε αντίθεση με αυτό, δεν αλλάζει τη γραμματοσειρά σε monospace.Σύνταξη
κενό διάστημα: κανονικό | nowrap | προ | προγραμμή | προτύλιγμα | κληρονομώ
Αξίες
κανονικό Το κείμενο στο παράθυρο του προγράμματος περιήγησης εμφανίζεται ως συνήθως, οι αλλαγές γραμμής ορίζονται αυτόματα. nowrap Τα διαστήματα αγνοούνται, οι αλλαγές γραμμής στον κώδικα HTML αγνοούνται, όλο το κείμενο εμφανίζεται σε μία γραμμή. ωστόσο, προσθέτοντας την ετικέτα
αναδιπλώνει το κείμενο σε μια νέα γραμμή. pre Το κείμενο εμφανίζεται με όλα τα κενά και τις παύλες όπως προστέθηκαν από τον προγραμματιστή στον κώδικα HTML. Εάν η γραμμή είναι πολύ μεγάλη για να χωρέσει στο παράθυρο του προγράμματος περιήγησης, θα προστεθεί μια οριζόντια γραμμή κύλισης. πριν τη γραμμή Τα κενά δεν λαμβάνονται υπόψη στο κείμενο, το κείμενο αναδιπλώνεται αυτόματα στην επόμενη γραμμή εάν δεν χωράει στην καθορισμένη περιοχή. pre-wrap Όλα τα κενά και οι παύλες διατηρούνται στο κείμενο, αλλά εάν το πλάτος της γραμμής δεν ταιριάζει στην καθορισμένη περιοχή, τότε το κείμενο θα αναδιπλωθεί αυτόματα στην επόμενη γραμμή. inherit Κληρονομεί την αξία του γονέα.Η επίδραση των τιμών στο κείμενο παρουσιάζεται στον Πίνακα. ένας.
HTML5 CSS2.1 IE Cr Op Sa Fx
λευκό χώρο Παράδειγμα
Το τελευταίο θεώρημα του Φερμά
Χ n+Y n=Ζ n
όπου n είναι ακέραιος > 2Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. ένας.
Ρύζι. 1. Εφαρμογή της ιδιότητας λευκού διαστήματος
Μοντέλο αντικειμένου
document.getElementById("elementID").style.whiteSpace
Προγράμματα περιήγησης
Ο Internet Explorer έως και την έκδοση 7.0 δεν υποστηρίζει τιμές pre-line , pre-wrap και inherit. Για