Proprietà CSS white-space

La proprietà CSS white-space controlla due aspetti contemporaneamente: come le sequenze di spazi bianchi (spazi, tabulazioni e ritorni a capo scritti nel sorgente HTML) vengono collassate o preservate, e se il testo va a capo quando raggiunge il bordo del suo contenitore.

Per impostazione predefinita, i browser trattano aggressivamente gli spazi bianchi. Qualsiasi sequenza di spazi, tabulazioni o ritorni a capo nel markup viene collassata in un unico spazio e il testo va a capo secondo necessità per adattarsi al suo box. Per questo motivo:

<p>Hello       world</p>

viene reso come Hello world con un unico spazio, indipendentemente dal numero di spazi digitati. La proprietà white-space permette di modificare questo comportamento — ad esempio per mantenere la formattazione del codice sorgente, conservare i ritorni a capo di una poesia, o impedire a un'etichetta di andare su due righe.

Quando usarla

nowrap — mantiene l'etichetta di un pulsante, la cella di una tabella o un elemento di navigazione su una singola riga.
pre / pre-wrap — visualizza testo preformattato (codice, ASCII art, rientri) dove gli spazi e i ritorni a capo digitati devono essere preservati. Questo è ciò che l'elemento <pre> usa per impostazione predefinita.
pre-line — conserva i ritorni a capo scritti nel sorgente continuando a collassare gli spazi extra — utile per indirizzi o brevi messaggi su più righe memorizzati come testo normale.

Se l'obiettivo è spezzare parole lunghe non separabili (come un URL) piuttosto che controllare gli spazi bianchi del sorgente, è preferibile usare overflow-wrap o word-break.

Come si comporta ciascun valore

La tabella seguente riassume come ogni valore tratta i ritorni a capo, gli spazi e le tabulazioni, e il ritorno a capo del testo.

Valore	Ritorni a capo	Spazi e tabulazioni	Ritorno a capo testo
`normal`	Collassa	Collassa	Va a capo
`nowrap`	Collassa	Collassa	Non va a capo
`pre`	Preserva	Preserva	Non va a capo
`pre-wrap`	Preserva	Preserva	Va a capo
`pre-line`	Preserva	Collassa	Va a capo
`break-spaces`	Preserva	Preserva	Va a capo (anche dopo ogni spazio)

Valore iniziale	normal
Si applica a	Elementi inline e celle di tabella; si applica anche a ::first-letter e ::first-line.
Ereditato	No.
Animabile	Sì. La proprietà white-space è animabile.
Versione	CSS1
Sintassi DOM	object.style.whiteSpace = "nowrap";

Sintassi

Sintassi della proprietà CSS white-space

white-space: normal | nowrap | pre | pre-line | pre-wrap | break-spaces | initial | inherit;

Esempio della proprietà white-space con il valore "normal"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Con normal, le sequenze di spazi bianchi nel sorgente vengono collassate in singoli spazi e il testo va a capo su una nuova riga quando raggiunge il bordo del <div>.

Esempio della proprietà white-space con il valore "nowrap"

Con nowrap, il testo continua a collassare gli spazi bianchi ma non va mai a capo. Fuoriesce dal lato del contenitore invece di andare su una seconda riga, il che di solito provoca un overflow orizzontale (spesso abbinato a text-overflow per aggiungere i puntini di sospensione).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà white-space con il valore "pre-line"

Con pre-line, le sequenze di spazi continuano a essere collassate in uno, ma i ritorni a capo scritti nel sorgente HTML vengono preservati e il testo continua ad andare a capo secondo necessità.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Provalo tu stesso »

Nell'esempio seguente è possibile vedere la differenza tra i valori nowrap, normal e pre-wrap affiancati.

Esempio della proprietà white-space con tre valori

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.t1 {
        white-space: nowrap;
      }
      p.t2 {
        white-space: normal;
      }
      p.t3 {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: pre-wrap;</h3>
    <p class="t3">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione	Prova
normal	Interrompe le righe secondo necessità per riempire i box di riga. Questo è il valore predefinito della proprietà.	Prova »
nowrap	Con questo valore il testo non andrà mai a capo sulla riga successiva.	Prova »
pre	Preserva sia gli spazi che i ritorni a capo. Il testo non andrà a capo sulla riga successiva.	Prova »
pre-line	Le sequenze di spazi bianchi vengono collassate in un unico spazio. Il testo va a capo quando necessario e sui ritorni a capo.	Prova »
pre-wrap	Gli spazi bianchi vengono preservati dal browser. Il testo va a capo quando necessario e sui ritorni a capo.	Prova »
break-spaces	Stesso comportamento di "pre-wrap", tranne che: qualsiasi sequenza di spazi bianchi preservati occupa sempre spazio (anche alla fine di una riga), esiste un'opportunità di interruzione riga dopo ogni carattere di spazio bianco preservato, e tali spazi influenzano la dimensione intrinseca del box invece di restare sospesi.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento genitore.

Proprietà correlate

overflow-wrap e word-break — controllano dove si spezzano le stringhe lunghe e non separabili.
text-overflow — da abbinare a white-space: nowrap per troncare il testo con i puntini di sospensione.
word-wrap — l'alias legacy di overflow-wrap.
overflow — definisce cosa succede al contenuto che supera il suo contenitore quando non va a capo.

Esercitazione

Pratica

Quali sono alcune delle caratteristiche del valore 'white-space' in CSS?

Si applica agli elementi inline.Permette di controllare i caratteri di spazio bianco nel testo.Non influisce su spazi, ritorni a capo o altri tipi di spazio bianco.Accetta valori come 'normal', 'nowrap', 'pre', 'pre-wrap' e 'pre-line'.Influisce sul colore del testo in CSS.