Ιδιότητα white-space

Η ιδιότητα white-space καθορίζει πώς να μεταφέρεται το κείμενο σε νέα γραμμή, καθώς και πώς να εμφανίζονται τα κενά μεταξύ λέξεων και οι αλλαγές γραμμής (σημεία όπου πατήθηκε το Enter κατά την πληκτρολόγηση του κώδικα).

Σύνταξη

επιλογέας {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Τιμές

Τιμή	Περιγραφή
`nowrap`	Απαγορεύει στο κείμενο να μεταφερθεί σε άλλη γραμμή, ακόμα και αν δεν χωράει στο πλάτος του περιέκτη (σε αυτήν την περίπτωση το κείμενο απλώς θα βγει έξω από τα όριά του). Ωστόσο, η προσθήκη της ετικέτας `br` θα αναγκάσει το κείμενο να μεταφερθεί σε νέα γραμμή.
`pre`	Το κείμενο εμφανίζεται όπως πληκτρολογήθηκε στο πρόγραμμα επεξεργασίας κατά τη δημιουργία της ιστοσελίδας: με όλα τα κενά και τα enter (αν στον κώδικα πληκτρολογήθηκαν πολλά κενά - στην οθόνη θα εμφανιστούν επίσης πολλά). Σε αυτήν την περίπτωση, το πρόγραμμα περιήγησης δεν θα μεταφέρει το κείμενο σε νέα γραμμή, αν δεν χωράει στον περιέκτη - το κείμενο απλώς θα βγει έξω από τα όριά του. Ανάλογο της ετικέτας pre, αλλά σε αντίθεση με αυτήν δεν αλλάζει τη γραμματοσειρά σε μονοδιάστατη (για μονοδιάστατες γραμματοσειρές βλ. την ιδιότητα `font-family`.
`pre-wrap`	Το ίδιο με το pre, η διαφορά είναι ότι αν το κείμενο είναι πολύ μακριό και δεν χωράει στον περιέκτη - το πρόγραμμα περιήγησης θα το μεταφέρει σε άλλη γραμμή.
`pre-line`	Το πρόγραμμα περιήγησης λαμβάνει υπόψη μόνο τα Enter στον κώδικα HTML και αγνοεί όλα τα υπόλοιπα (πολλά κενά θα εμφανίζονται ως ένα, το πρόγραμμα περιήγησης τοποθετεί μόνο του τις αλλαγές γραμμής).
`normal`	Τυπική συμπεριφορά: το πρόγραμμα περιήγησης τοποθετεί μόνο του τις αλλαγές γραμμής έτσι ώστε οι λέξεις να χωράνε στον περιέκτη. Πολλά κενά στον κώδικα θα εμφανίζονται ως ένα στην οθόνη.

Προεπιλεγμένη τιμή: normal.

Παράδειγμα . Τιμή nowrap

Σε αυτό το παράδειγμα, το κείμενο δεν θα χωρέσει στον περιέκτη και θα βγει έξω από τα όριά του, αφού έχει οριστεί η τιμή nowrap:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Παράδειγμα . Τιμή nowrap και ετικέτα br

Αν προστεθεί η ετικέτα br - το κείμενο θα μεταφερθεί σε νέα γραμμή (ακριβώς σε εκείνο το σημείο, όπου βρίσκεται η br):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Παράδειγμα . Τιμή pre

Σε αυτό το παράδειγμα, το κείμενο εμφανίζεται έτσι, όπως πληκτρολογήθηκε στον επεξεργαστή κώδικα HTML (με όλες τις εσοχές με το πλήκτρο Tab, με Enter και ούτω καθεξής):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Παράδειγμα . Τιμή pre-wrap

Τώρα το κείμενο εμφανίζεται όπως ήταν πληκτρολογημένο στον επεξεργαστή κώδικα HTML, ωστόσο, τα τμήματα που βγαίνουν έξω μεταφέρονται σε νέα γραμμή:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Δείτε επίσης

ιδιότητες word-break και overflow-wrap,
που επιτρέπουν τη μεταφορά γραμμάτων μιας μακριάς λέξης σε νέα γραμμή
ιδιότητα tab-size,
που ορίζει το μέγεθος της εσοχής που δημιουργήθηκε από το πλήκτρο Tab
ιδιότητα hyphens,
που ενεργοποιεί τη μεταφορά λέξεων κατά συλλαβές
ιδιότητα overflow,
που περικόπτει τα τμήματα που βγαίνουν έξω από το όριο του μπλοκ
ετικέτα pre,
που εμφανίζει το κείμενο όπως ήταν πληκτρολογημένο στον επεξεργαστή κώδικα HTML