Spazio bianco - Trucchi CSS

La proprietà white-space controlla come il testo viene gestito sull'elemento a cui è applicato. Supponiamo che tu abbia HTML esattamente come questo:

 A bunch of words you see. 

Hai impostato lo stile del div in modo che abbia una larghezza impostata di 100 px. Con una dimensione del carattere ragionevole, è troppo testo per adattarsi a 100 px. Senza fare nulla, il white-spacevalore predefinito è normale il testo andrà a capo. Guarda l'esempio qui sotto o segui a casa la demo.

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

Se vuoi evitare che il testo vada a capo, puoi applicare white-space: nowrap;

Si noti nell'esempio di codice HTML all'inizio di questo articolo, in realtà ci sono due interruzioni di riga, una prima della riga di testo e una dopo, che consentono al testo di essere sulla propria riga (nel codice). Quando il testo viene visualizzato nel browser, tali interruzioni di riga vengono visualizzate come se fossero state eliminate. Inoltre vengono eliminati gli spazi extra sulla riga prima della prima lettera. Se vogliamo forzare il browser a visualizzare quelle interruzioni di riga e caratteri di spazio bianco extra che possiamo usarewhite-space: pre;

Si chiama preperché il comportamento è quello come se avessi racchiuso il testo

tag (che per impostazione predefinita gestiscono lo spazio bianco e le interruzioni di riga in questo modo). Lo spazio bianco viene rispettato esattamente come nell'HTML e il testo non va a capo finché non è presente un'interruzione di riga nel codice. Ciò è particolarmente utile quando si visualizza letteralmente il codice, che beneficia esteticamente di una certa formattazione (e un po 'di tempo è assolutamente cruciale, come nei linguaggi dipendenti dallo spazio bianco!)

Forse ti piace il modo in cui preonora gli spazi bianchi e le interruzioni, ma hai bisogno che il testo vada a capo invece che potenzialmente uscire dal suo contenitore principale. Ecco a cosa white-space: pre-wrap;serve:

Infine, white-space: pre-line;interromperà le righe nel punto in cui interrompono il codice, ma lo spazio bianco aggiuntivo viene comunque rimosso.

È interessante notare che l'interruzione di riga finale non viene rispettata. Secondo la specifica CSS 2.1: "Le righe vengono interrotte in corrispondenza dei caratteri di nuova riga conservati e, se necessario, per riempire le caselle di riga." quindi forse ha senso.

Ecco una tabella per comprendere i comportamenti di tutti i diversi valori:

	Nuove linee	Spazi e tabulazioni	Testo a capo
normale	Crollo	Crollo	Avvolgere
pre	Conserva	Conserva	Nessun avvolgimento
nowrap	Crollo	Crollo	Nessun avvolgimento
pre-avvolgere	Conserva	Conserva	Avvolgere
pre-linea	Conserva	Crollo	Avvolgere

In CSS3, la white-spaceproprietà seguirà letteralmente quel grafico e mapperà le proprietà a text-space-collapsee di text-wrapconseguenza.

Maggiori informazioni

• Mozilla Docs

Supporto browser

Un po 'più complesso della normale tabella di supporto, poiché ogni valore ha diversi livelli di supporto:

Browser	Versione	Supporto di
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
musica lirica	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
	3,0 (522)	normal | pre | nowrap | pre-wrap | pre-line