Proprietà white-space

La proprietà white-space imposta come andare a capo il testo, e anche come visualizzare gli spazi tra le parole e gli a capo (punti in cui è stato premuto Enter durante la digitazione del codice).

Sintassi

selettore {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Valori

Valore	Descrizione
`nowrap`	Impedisce al testo di andare a capo, anche se non si adatta alla larghezza del contenitore (in questo caso il testo semplicemente uscirà dai suoi bordi). Tuttavia, l'aggiunta del tag `br` forzerà il testo ad andare a capo.
`pre`	Il testo viene visualizzato così come è stato digitato nell'editor durante la creazione del sito: con tutti gli spazi e gli invii (se nel codice sono stati digitati più spazi, sullo schermo appariranno più spazi). In questo caso il browser non andrà a capo il testo, se non si adatta al contenitore - il testo semplicemente uscirà dai suoi bordi. Analogo al tag pre, ma a differenza di questo non cambia il font in monospace (per il font monospace vedi la proprietà `font-family`.
`pre-wrap`	La stessa cosa di pre, la differenza è che se il testo è troppo lungo e non entra nel contenitore - il browser lo porterà a capo.
`pre-line`	Il browser considera solo gli Enter nel codice HTML e ignora tutto il resto (più spazi appariranno come uno solo, il browser stesso inserisce le interruzioni di riga).
`normal`	Comportamento standard: il browser stesso inserisce le interruzioni di riga in modo che le parole si adattino al contenitore. Più spazi nel codice appariranno come uno solo sullo schermo.

Valore predefinito: normal.

Esempio . Valore nowrap

In questo esempio il testo non si adatterà al contenitore e uscirà dai suoi bordi, poiché è impostato il valore nowrap:

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

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

Esempio . Valore nowrap e tag br

Se si aggiunge il tag br - il testo andrà a capo (in corrispondenza esatta del punto in cui si trova br):

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

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

Esempio . Valore pre

In questo esempio il testo viene visualizzato così come è stato digitato nell'editor del codice HTML (con tutti i rientri tramite il tasto Tab, con Enter e così via):

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

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

Esempio . Valore pre-wrap

E ora il testo viene visualizzato così come è stato digitato nell'editor del codice HTML, tuttavia, le parti che sporgono vengono portate a capo:

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

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

Vedi anche

le proprietà word-break e overflow-wrap,
che permettono di andare a capo le lettere di una parola lunga
la proprietà tab-size,
che imposta la dimensione del rientro creato dal tasto Tab
la proprietà hyphens,
che abilita la sillabazione delle parole
la proprietà overflow,
che taglia le parti che sporgono oltre il bordo del blocco
il tag pre,
che mostra il testo così come è stato digitato nell'editor del codice HTML