WiFi
Linux
Windows
Διάφορα
Δίκτυα
Εξυπνη τηλεόραση
Λύσεις

Πώς να προσθέσετε αλλαγές γραμμής χρησιμοποιώντας ιδιότητες CSS. Τρόπος αναδίπλωσης κειμένου σε ένα κελί στο Excel Μετακίνηση στην επόμενη γραμμή html

Κατά την εμφάνιση εγγράφων κειμένου σε ένα πρόγραμμα περιήγησης, η θέση των αλλαγών γραμμής μέσα σε μια παράγραφο προσδιορίζεται αυτόματα ανάλογα με το μέγεθος των γραμματοσειρών και το μέγεθος του παραθύρου προβολής. Οι αλλαγές γραμμής μπορούν να πραγματοποιηθούν μόνο με χρήση χαρακτήρων διαχωρισμού λέξεων (για παράδειγμα, κενά). Μερικές φορές στα έγγραφα πρέπει να ορίσετε μια αναγκαστική τροφοδοσία γραμμής, η οποία υλοποιείται ανεξάρτητα από τις ρυθμίσεις του προγράμματος περιήγησης. Αυτό γίνεται χρησιμοποιώντας την ετικέτα αναγκαστικής τροφοδοσίας γραμμής.
, το οποίο δεν έχει αντίστοιχη ετικέτα κλεισίματος. Ενεργοποίηση ετικέτας
στο κείμενο του εγγράφου θα διασφαλίσει ότι το επόμενο κείμενο τοποθετείται στην αρχή μιας νέας γραμμής. Για παράδειγμα, αυτή η προσέγγιση μπορεί να χρησιμοποιηθεί για τη δημιουργία δομών τύπου λίστας χωρίς τη χρήση ειδικών ετικετών σήμανσης λίστας. Ή, για παράδειγμα, αυτή η ετικέτα δεν μπορεί να χρησιμοποιηθεί για την εμφάνιση ποιημάτων κ.λπ.

Ακολουθεί ένα παράδειγμα χρήσης αναγκαστικής τροφοδοσίας γραμμής (Εικ. 1.8):

Χρήση αναγκαστικής τροφοδοσίας γραμμής

Πάνω από τη σκοτεινή Πετρούπολη

Ο Νοέμβρης ανέπνευσε το φθινοπωρινό κρύο.

Πιτσίλισμα με θορυβώδες κύμα

Στις άκρες του λεπτού φράχτη σου,

Ο Νέβα τριγυρνούσε σαν άρρωστος

Ανήσυχο στο κρεβάτι μου.

A.S. Πούσκιν. Χάλκινος Ιππέας

Ρύζι. 1.8.Ετικέτα
μπορεί να χρησιμοποιηθεί για αναγκαστική τροφοδοσία γραμμής

Σε αντίθεση με την ετικέτα παραγράφου

Όταν χρησιμοποιείτε την ετικέτα
δεν θα δημιουργηθεί μια κενή συμβολοσειρά.

Χρησιμοποιώντας μια ετικέτα
απαιτεί προσοχή - είναι πιθανό το πρόγραμμα περιήγησης να έχει ήδη κάνει μια αλλαγή γραμμής μία ή δύο λέξεις πριν συναντήσει την ετικέτα σας
. Αυτό συμβαίνει εάν το πλάτος του παραθύρου προβολής του προγράμματος ανάγνωσης είναι μικρότερο από την ίδια ρύθμιση του προγράμματος με το οποίο δοκιμάσατε το έγγραφό σας. Σε αυτήν την περίπτωση, μπορεί να αποδειχθεί ότι μόνο μία λέξη παραμένει σε μια γραμμή στη μέση μιας παραγράφου, καταστρέφοντας έτσι την ομορφιά της διάταξης του εγγράφου.

Σημείωση

Όταν χρησιμοποιείτε την ετικέτα
Για να σπάσετε κείμενο γύρω από μια εικόνα ή έναν πίνακα, μπορείτε να ρυθμίσετε την παράμετρο CLEAR για να σταματήσει η αναδίπλωση κειμένου. Μπορείτε να διαβάσετε για αυτό στα κεφάλαια 3 και 4.

Ετικέτες u

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

Σημείωση

Για να διασφαλιστεί η συνέχεια του κειμένου που βρίσκεται στα κελιά του πίνακα, υπάρχει μια ειδική παράμετρος της ετικέτας NOWRAP . Μπορείτε να μάθετε περισσότερα για αυτό στο Κεφάλαιο 4.

Σήμανση κειμένου με ετικέτα γραμμής χωρίς διακοπή μπορείτε να πάρετε πολύ μακριές χορδές. Για να αποφευχθεί αυτό, μπορείτε να υποδείξετε στο πρόγραμμα περιήγησης του αναγνώστη τη θέση μιας πιθανής τροφοδοσίας γραμμής, η οποία θα εκτελείται μόνο όταν είναι απαραίτητο (η λεγόμενη "μαλακή" τροφοδοσία γραμμής). Αυτό μπορεί να γίνει τοποθετώντας μια ετικέτα στη σωστή θέση στο κείμενο (Λέξη BReak), η οποία είναι ίδια με την ετικέτα
, δεν χρειάζεται ετικέτα κλεισίματος.

Σημείωση

Ετικέτα δεν υποστηρίζεται καθόλου από το πρόγραμμα περιήγησης Netscape. Ο Microsoft Internet Explorer αναγνωρίζει αυτήν την ετικέτα μόνο σε κείμενο με ετικέτα .

Συχνά υπάρχει ανάγκη να προστεθεί μια νέα παράγραφο, αλλά χωρίς την κενή γραμμή που εισάγει η ετικέτα παραγράφου

Για ορισμένα τμήματα κειμένου, η τυπική απόσταση παραγράφων είναι απλώς ακατάλληλη. Αυτά μπορεί να είναι επιγραφές κάτω από εικόνες και σε πίνακες, ποιήματα, αποσπάσματα, υποσημειώσεις και σημειώσεις.

Για να αναγκαστούν οι αλλαγές γραμμής, παρέχεται μια ειδική ετικέτα, η συνάρτηση της οποίας περιέχεται στο όνομά της br (διάλειμμα σειράς - "διάσπαση σειράς, γραμμή"). Ετικέτα
Η γλώσσα σήμανσης υπερκειμένου (HTML) σημαίνει ότι όλο το περιεχόμενο που ακολουθεί πρέπει να ξεκινά από μια νέα γραμμή. Εάν είναι απαραίτητο, μπορείτε να προσθέσετε πολλές ετικέτες στη σειρά για να επιτύχετε το απαιτούμενο διάστημα.

Ετικέτα
Δεν κάνει διάκριση πεζών-κεφαλαίων και δεν απαιτεί ετικέτα κλεισίματος επειδή είναι κενό στοιχείο, αλλά είναι καλύτερα να συνηθίσετε να κλείνουμε όλες τις ετικέτες. Στο XHTML, η ετικέτα διακοπής πρέπει να "κλείνεται" με ανάστροφη κάθετο.

Παράδειγμα χρήσης ετικέτας διαλείμματος

Η ετικέτα br σε δράση< /title></p><p><р>Απουσία από την εργασία</р></p><p><p>Πουθενά αλλού και ποτέ <br></p><p>Δεν ήμουν τόσο κακός <br></p><p>Τα αφεντικά είναι μια άπληστη ορδή <br></p><p>Να με ροκανίζει ζωντανό</р></p><p>Απουσία από την εργασία</p><p>Πουθενά αλλού και ποτέ <br>Δεν ήμουν τόσο κακός. <br>Τα αφεντικά είναι μια άπληστη ορδή <br>Με ροκανίζει ζωντανό.</p><h2>Χαρακτηριστικό ετικέτας <br></h2><p>Το μόνο χαρακτηριστικό που έχει μια ετικέτα html <br>, που ονομάζεται Λέει στο πρόγραμμα περιήγησης τι να κάνει με την αναδίπλωση γραμμής εάν το κείμενο πρέπει να αναδιπλωθεί γύρω από ένα λεγόμενο αιωρούμενο στοιχείο, το οποίο θα μπορούσε να είναι, για παράδειγμα, μια εικόνα με ένα χαρακτηριστικό align χρησιμοποιώντας τιμές δεξιά/αριστερά ή ένα μπλοκ στο CSS που έχει την ιδιότητα float.</p><p>Στις προδιαγραφές XHTML 1.0 / HTML 4.01, το χαρακτηριστικό clear μπορεί να χρησιμοποιηθεί μόνο με Transitional, Frameset και<!DOCTYPE>, διαφορετικά ο κωδικός δεν θα λειτουργήσει.</p><h2>Προσθήκη ετικετών στις ιδιότητες χαρακτηριστικών</h2><p>Η επίδραση του χαρακτηριστικού clear εξαρτάται από την τιμή του και την τοποθέτηση του αιωρούμενου στοιχείου. Το χαρακτηριστικό μπορεί να λάβει 4 τιμές:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>Η αριστερή τιμή εμποδίζει την αναδίπλωση του στοιχείου με αριστερή στοίχιση, οπότε το κείμενο θα σκοντάψει πάνω από την ετικέτα <br>, θα βρίσκεται κάτω από την εικόνα ή άλλο αιωρούμενο στοιχείο.</p><p>Ακριβώς το ίδιο αποτέλεσμα θα προκύψει από τη χρήση του ορίσματος all, το οποίο δεν θα επιτρέψει ποτέ ούτε το δεξιό ούτε το αριστερό.</p><p>Η σωστή τιμή αποτρέπει την αναδίπλωση του κειμένου γύρω από το στοιχείο με τη δεξιά στοίχιση, άρα μετά την ετικέτα <br>το κείμενο δεν θα έχει άλλη επιλογή από το να περιηγηθεί την εικόνα, ρέοντας γύρω της προς τα δεξιά.</p><p>Η τιμή none ("ούτε δική σας ούτε δική μας") γενικά αφαιρεί όλες τις δυνάμεις από το χαρακτηριστικό καθαρό και την ετικέτα <br>μετακινεί σιωπηλά τη γραμμή προς τα κάτω.</p><p>Το χαρακτηριστικό clear της ετικέτας δεν έχει μια προεπιλεγμένη τιμή από μόνη της.</p><h2>Ετικέτα <br>- αυτή είναι μια μαλακή μεταφορά</h2><p>Η ετικέτα αλλαγής γραμμής είναι πολύ χρήσιμη για τη δημιουργία του απαραίτητου διαστήματος μεταξύ των παραγράφων, εντός της οποίας χρησιμοποιείται ως μαλακό διάλειμμα, αλλά όχι ως μέσο για τη διαίρεση του κειμένου σε παραγράφους.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>Δεν πρέπει να παρασυρθείτε πολύ με την ετικέτα νέας γραμμής για τη μορφοποίηση κειμένου, επειδή τα αποτελέσματα από τη χρήση της δεν είναι πάντα κομψά.</p><p>Για παράδειγμα, εάν χρησιμοποιείτε την ετικέτα <br>για να σπάσετε γραμμές μέσα σε μια παράγραφο, αυτό μπορεί να έχει ως αποτέλεσμα την εμφάνιση μιας "χτένας" στο παράθυρο του χρήστη, εάν είναι μικρότερο από το παράθυρο που στόχευε ο webmaster.</p> <p>Μάθημα 5.</p><h1></h1> <p>Σε αυτό το μάθημα: <br>1. Ας μάθουμε πώς να κάνουμε τον κώδικα html πιο βολικό και ευανάγνωστο για εμάς. <br>2. Ας δούμε πώς να τυλίξετε σωστά μια γραμμή κειμένου.</p> <h2>Κάνοντας τον κώδικα html βολικό.</h2> <p>Πλέον ο κώδικάς μας είναι σαφής και ευανάγνωστος, αφού υπάρχει λίγο κείμενο και πρακτικά δεν υπάρχουν ετικέτες. Όταν δημιουργούμε μια πιο σύνθετη σελίδα, θα υπάρχουν πολλές ετικέτες, οπότε θα είναι δύσκολο να βρούμε τη σωστή.</p> <p>Για να αποφύγετε το χάος των ετικετών, πρέπει αρχικά να τακτοποιήσετε ετικέτες και γραμμές έτσι ώστε να είναι οπτικά πιο εύκολα αντιληπτές. Όταν το πρόγραμμα περιήγησης διαβάζει πληροφορίες από μια σελίδα html, δεν έχει σημασία πόσα κενά ή κενές γραμμές υπάρχουν στον κώδικα.</p> <p>Άλλαξα το κείμενο στον κώδικα της σελίδας σε σχέση με αυτό που δημιουργήσαμε, αλλά δεν πειράζει. Η αριστερή και η δεξιά εικόνα δείχνουν τον ίδιο κωδικό. Και οι δύο επιλογές θα εμφανίζονται από το πρόγραμμα περιήγησης στην οθόνη της οθόνης ακριβώς το ίδιο. Συμφωνώ, η εργασία με τον κωδικό που εμφανίζεται στα δεξιά θα είναι πολύ πιο εύκολη από ό,τι με αυτόν στα αριστερά.</p> <p>Ο κώδικας που εξετάζουμε είναι πολύ απλός, αλλά ακόμα και τώρα η διαφορά στην οπτική αντίληψη είναι αισθητή. Δεν υπάρχουν συγκεκριμένοι κανόνες για να "βάλουμε τα πράγματα σε τάξη", κάθε πλοίαρχος αποφασίζει μόνος του πώς είναι πιο βολικό γι 'αυτόν να εργαστεί.</p> <h2>Αλλαγή γραμμής HTML. Προσθήκη ετικέτας <br>.</h2> <p>Δώστε προσοχή στην εικόνα. Στην πρώτη έκδοση το κείμενο είναι γραμμένο σε μία γραμμή, στη δεύτερη έκδοση σε δύο γραμμές.</p> <br><img src='https://i1.wp.com/htmlboss.ru/image/lesson6-2.jpg' width="100%" loading=lazy loading=lazy><p>Το πρόγραμμα περιήγησης θα εμφανίσει και τις δύο επιλογές το ίδιο. Το κείμενο θα γραφτεί σε μία γραμμή:</p> <br><img src='https://i1.wp.com/htmlboss.ru/image/lesson6-3.jpg' width="100%" loading=lazy loading=lazy><p>Ρωτάς γιατί είναι αυτό; Πράγματι, σε έναν από τους κωδικούς, μέρος του κειμένου μετακινείται σε άλλη γραμμή. Θα ήταν λογικό αν στο πρόγραμμα περιήγησης κάποιο από το κείμενο μεταφερόταν επίσης σε άλλη γραμμή, αλλά η html έχει τη δική της λογική από αυτή την άποψη. <u>Αν κάνουμε μια αλλαγή γραμμής στον κώδικα html, τότε για το πρόγραμμα περιήγησης αυτό ισοδυναμεί με ένα κενό</u>(σαν κανονικό κενό μεταξύ λέξεων στο κείμενο). Εάν μετακινήσουμε μέρος του κειμένου όχι μία γραμμή προς τα κάτω, αλλά 2 ή 3 (οποιοσδήποτε αριθμός), τότε το πρόγραμμα περιήγησης θα εξακολουθεί να θεωρεί αυτήν την απόσταση ως ένα κανονικό διάστημα μεταξύ των λέξεων και όταν εμφανίζεται στην οθόνη, το κείμενο θα γράφεται σε μία γραμμή .</p> <h3>Προσθήκη ετικέτας <br></h3> <p>Όταν γνωριστήκαμε με τις ετικέτες στο τρίτο μάθημα, ανέφερα ότι υπάρχουν ετικέτες που δεν χρειάζονται κλείσιμο. Ετικέτα <b><br></b>ένα από αυτά χρησιμοποιείται για διαλείμματα γραμμής. <br>Ας το εφαρμόσουμε στον κώδικα:</p> <img src='https://i2.wp.com/htmlboss.ru/image/lesson6-4.jpg' height="298" width="388" loading=lazy loading=lazy><p>Έχουμε εισαγάγει μια ετικέτα <b><br></b>στον κώδικα html μας και τώρα όταν εκκινήσετε το αρχείο μέσω του προγράμματος περιήγησης, μέρος του κειμένου θα μεταφερθεί στην επόμενη γραμμή. <br> * <i>Μην ξεχάσετε να αποθηκεύσετε τις αλλαγές στο Σημειωματάριο (Ctrl + S) και να ανανεώσετε τη σελίδα στο πρόγραμμα περιήγησης (F5).</i></p> <p>Κατά τη δημιουργία διατάξεων, οι webmasters έχουν περιοδικά μια ερώτηση: πώς θα μεταφερθεί το κείμενο; Στις περισσότερες περιπτώσεις, το πρόγραμμα περιήγησης χειρίζεται αυτήν την εργασία από μόνο του. Αλλά μερικές φορές αυτή η διαδικασία πρέπει να τεθεί υπό έλεγχο, ειδικά όταν μορφοποιείτε μεγάλες λέξεις και φράσεις που, αν μεταφραστούν λανθασμένα, χάνουν το νόημά τους.</p> <h2>ιδιότητα αναδίπλωσης λέξης</h2> <p>Στο HTML υπάρχει μια ειδική ετικέτα για να διαχωρίσετε γραμμές <br>. Αλλά η πολύ συχνή χρήση του θεωρείται κακή συμπεριφορά μεταξύ των προγραμματιστών και συχνά υποδηλώνει αντιεπαγγελματισμό. Ως απόδειξη, φανταστείτε ότι έχετε ένα λογότυπο και θέλετε κάθε γράμμα να ξεκινά από μια νέα γραμμή:</p><p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Έλεγχος της αναδιατύπωσης των λέξεων

Το αποτέλεσμα είναι δυσκίνητος και άσχημος κώδικας που θα προκαλέσει πολιτισμικό σοκ σε κάθε προγραμματιστή. Και τι πρέπει να κάνετε εάν θέλετε το λογότυπο να τοποθετηθεί οριζόντια στην έκδοση για επιτραπέζιους υπολογιστές και κάθετα εάν το πλάτος της οθόνης είναι μικρότερο από 550 pixel; Επομένως, χρησιμοποιείτε πάντα Cascading Style Sheets για να προσαρμόσετε την εμφάνιση των στοιχείων. Επιπλέον, με τη βοήθεια εργαλείων 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 - προσθέτει μια έλλειψη.
#wrapper p( χρώμα: #FFF; padding: 10px; γραμματοσειρά: bold 16px Helvetica, sans-serif; text-overflow: ellipsis; /*Προσθήκη έλλειψης*/ λευκό διάστημα: nowrap; /* Απενεργοποίηση αναδίπλωσης γραμμής */ υπερχείλιση : κρυφό;/*Απόκρυψη ό,τι υπερβαίνει το κοντέινερ*/ )

Για να λειτουργήσει η ιδιότητα, το στοιχείο πρέπει επίσης να ρυθμιστεί ώστε να απαγορεύει τις αλλαγές γραμμής και την υπερχείλιση με την τιμή που είναι κρυμμένη.

σύντομες πληροφορίες

Εκδόσεις CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Περιγραφή

Η ιδιότητα λευκού διαστήματος καθορίζει τον τρόπο εμφάνισης διαστημάτων μεταξύ των λέξεων. Υπό κανονικές συνθήκες, οποιοσδήποτε αριθμός διαστημάτων στον κώδικα HTML εμφανίζεται ως ένα σε μια ιστοσελίδα. Η εξαίρεση είναι η ετικέτα 

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


Σύνταξη


κενό διάστημα: κανονικό |  nowrap |  προ |  προ-γραμμή |  προτύλιγμα |  κληρονομώ


Αξίες
κανονικό Το κείμενο στο παράθυρο του προγράμματος περιήγησης εμφανίζεται ως συνήθως, οι αλλαγές γραμμής ορίζονται αυτόματα.  nowrap Τα κενά δεν λαμβάνονται υπόψη, οι αλλαγές γραμμής στον κώδικα HTML αγνοούνται, όλο το κείμενο εμφανίζεται σε μία γραμμή.  ταυτόχρονα, προσθέτοντας μια ετικέτα 
αναδιπλώνει το κείμενο σε νέα γραμμή.  pre Το κείμενο εμφανίζεται λαμβάνοντας υπόψη όλα τα κενά και τις παύλες όπως προστέθηκαν από τον προγραμματιστή στον κώδικα HTML.  Εάν η γραμμή είναι πολύ μεγάλη και δεν χωράει στο παράθυρο του προγράμματος περιήγησης, θα προστεθεί μια οριζόντια γραμμή κύλισης.  Προγραμμική Τα κενά δεν λαμβάνονται υπόψη στο κείμενο· το κείμενο μετακινείται αυτόματα στην επόμενη γραμμή εάν δεν χωράει στην καθορισμένη περιοχή.  pre-wrap Όλα τα κενά και τα διαλείμματα διατηρούνται στο κείμενο, αλλά εάν το πλάτος της γραμμής δεν ταιριάζει στην καθορισμένη περιοχή, το κείμενο θα αναδιπλωθεί αυτόματα στην επόμενη γραμμή.  inherit Κληρονομεί την αξία του γονέα. 
Η επίδραση των τιμών στο κείμενο παρουσιάζεται στον πίνακα.  1.


HTML5 CSS2.1 IE Cr Op Sa Fx

 

 
 
 λευκός χώρος
 
 
 
 
Παράδειγμα

 

 
 
 Το τελευταίο θεώρημα του Φερμά

 Χ n+Y n= Ζ n
όπου n είναι ακέραιος > 2




 
 

 






Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ.  1.


Ρύζι.  1. Εφαρμογή της ιδιότητας λευκού διαστήματος


Μοντέλο αντικειμένου


document.getElementById("elementID").style.whiteSpace


Προγράμματα περιήγησης


Οι εκδόσεις του Internet Explorer έως και 7.0 δεν υποστηρίζουν τιμές pre-line , pre-wrap ή inherit values.  Για