Λευκός χώρος - CSS-Κόλπα

Η ιδιότητα white-space ελέγχει τον τρόπο χειρισμού του κειμένου στο στοιχείο στο οποίο εφαρμόζεται. Ας υποθέσουμε ότι έχετε HTML ακριβώς έτσι:

 A bunch of words you see.

Έχετε διαμορφώσει το div ώστε να έχει καθορισμένο πλάτος 100px. Σε λογικό μέγεθος γραμματοσειράς, αυτό είναι πάρα πολύ κείμενο για να χωρέσει στα 100 εικονοστοιχεία. Χωρίς να κάνετε τίποτα, η προεπιλεγμένη white-spaceτιμή είναι normalκαι το κείμενο θα αναδιπλωθεί. Δείτε το παρακάτω παράδειγμα ή ακολουθήστε το σπίτι με το demo.

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

Εάν θέλετε να αποτρέψετε την αναδίπλωση του κειμένου, μπορείτε να κάνετε αίτηση white-space: nowrap;

Παρατηρήστε στο παράδειγμα κώδικα HTML στην κορυφή αυτού του άρθρου, υπάρχουν πραγματικά δύο αλλαγές γραμμής, μία πριν από τη γραμμή κειμένου και μία μετά, που επιτρέπουν στο κείμενο να βρίσκεται στη δική του γραμμή (στον κώδικα). Όταν το κείμενο αποδίδεται στο πρόγραμμα περιήγησης, αυτές οι αλλαγές γραμμής εμφανίζονται σαν να έχουν αφαιρεθεί. Επίσης αφαιρούνται τα επιπλέον κενά στη γραμμή πριν από το πρώτο γράμμα. Αν θέλουμε να αναγκάσουμε το πρόγραμμα περιήγησης να εμφανίσει αυτές τις αλλαγές γραμμής και επιπλέον χαρακτήρες λευκού διαστήματος μπορούμε να χρησιμοποιήσουμεwhite-space: pre;

Ονομάζεται preγιατί η συμπεριφορά είναι σαν να έχετε τυλίξει το κείμενο

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

Ίσως σας αρέσει ο τρόπος με τον οποίο preτιμά το κενό διάστημα και το σπάσιμο, αλλά χρειάζεστε το κείμενο για να τυλίξετε αντί να βγείτε δυνητικά από το γονικό του δοχείο. Αυτό white-space: pre-wrap;είναι για:

Τέλος, white-space: pre-line;θα σπάσει τις γραμμές όπου θα σπάσουν σε κώδικα, αλλά ο επιπλέον λευκός χώρος εξακολουθεί να έχει αφαιρεθεί.

Είναι ενδιαφέρον ότι η τελική αλλαγή γραμμής δεν τιμάται. Σύμφωνα με την προδιαγραφή CSS 2.1: "Οι γραμμές είναι σπασμένες σε διατηρημένους χαρακτήρες νέας γραμμής και, όπως είναι απαραίτητο, για να γεμίσουν κουτιά γραμμής." οπότε ίσως αυτό έχει νόημα.

Εδώ είναι ένας πίνακας για να κατανοήσετε τις συμπεριφορές όλων των διαφορετικών τιμών:

	Νέες γραμμές	Spaces και καρτέλες	ΑΝΑΔΙΠΛΩΣΗ ΚΕΙΜΕΝΟΥ
κανονικός	Κατάρρευση	Κατάρρευση	Κάλυμμα
προ	Διατηρώ	Διατηρώ	Χωρίς περιτύλιξη
τώρα	Κατάρρευση	Κατάρρευση	Χωρίς περιτύλιξη
προ-περιτύλιγμα	Διατηρώ	Διατηρώ	Κάλυμμα
προ-γραμμή	Διατηρώ	Κατάρρευση	Κάλυμμα

Στο CSS3, η white-spaceιδιοκτησία κυριολεκτικά θα ακολουθήσει αυτό το γράφημα και θα χαρτογραφήσει τις ιδιότητες text-space-collapseκαι text-wrapανάλογα.

Περισσότερες πληροφορίες

Έγγραφα Mozilla

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

Λίγο πιο περίπλοκο από τον κανονικό πίνακα υποστήριξης, καθώς κάθε τιμή έχει διαφορετικά επίπεδα υποστήριξης:

Πρόγραμμα περιήγησης	Εκδοχή	Υποστήριξη του
Internet Explorer	5.5	`normal \| nowrap`
	6.0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Firefox (Gecko)	1.0 (1.0)	`normal \| pre \| nowrap \| -moz-pre-wrap`
	3.0 (1.9)	`normal \| pre \| nowrap \| pre-wrap \| -moz-pre-wrap`
	3.5 (1.9.1)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
ΛΥΡΙΚΗ ΣΚΗΝΗ	4.0	`normal \| pre \| nowrap`
	8.0	`normal \| pre \| nowrap \| pre-wrap`
	9.5	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Safari (WebKit)	1.0 (85)	`normal \| pre \| nowrap`
Safari (WebKit)	3.0 (522)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`