CSS white-space
La proprietà CSS white-space (CSS3) gestisce spazi bianchi e interruzioni di linea
La proprietà white-space controlla come vengono gestiti gli spazi bianchi all'interno di un elemento e quando il testo va a capo. Permette di scegliere se ridurre gli spazi multipli, mantenere gli spazi e i ritorni a capo, o impedire il wrapping automatico del testo.
Sintassi
Significato dei valori principali:
normal: Valore predefinito. Gli spazi bianchi sono ridotti a uno solo, il testo va a capo automaticamente.
nowrap: Il testo non va a capo automaticamente; le righe continuano sulla stessa linea finché non c’è un `
` o un contenuto esplicito.pre: Il testo mantiene tutti gli spazi bianchi e i ritorni a capo esattamente come nel codice, senza andare a capo automaticamente.
pre-wrap: Il testo mantiene gli spazi bianchi e i ritorni a capo, ma va a capo automaticamente se supera la larghezza del contenitore.
pre-line: Gli spazi bianchi multipli sono ridotti a uno, ma i ritorni a capo nel codice sono mantenuti.
break-spaces: Simile a
pre-wrap, ma mantiene anche gli spazi bianchi alla fine delle righe e consente di andare a capo sulle sequenze di spazi.
Esempio proprietà: white-space
Codice Esempio: white-space
.white-space-container {
width: 400px;
font-family: monospace;
border: 1px solid #50a14f;
padding: 10px;
margin-bottom: 20px;
background-color: #f9f9f9;
}.normal {
white-space: normal;
background-color: #d1e7dd;
margin-bottom: 10px;
}.nowrap {
white-space: nowrap;
background-color: #f8d7da;
margin-bottom: 10px;
}.pre {
white-space: pre;
background-color: #cfe2ff;
margin-bottom: 10px;
}.pre-wrap {
white-space: pre-wrap;
background-color: #fff3cd;
margin-bottom: 10px;
}.pre-line {
white-space: pre-line;
background-color: #d1d1d1;
margin-bottom: 10px;
}.break-spaces {
white-space: break-spaces;
background-color: #e2d1f9;
margin-bottom: 10px;
}
Contenuto Esempio: white-space
Esempio di utilizzo di white-space
Questo esempio mostra come il testo viene gestito con diversi valori di white-space:
CSS e HTML per l'esempio di white-space:
<style>
.white-space-container {
width: 400px;
font-family: monospace;
border: 1px solid #50a14f;
padding: 10px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
.normal {
white-space: normal;
background-color: #d1e7dd;
margin-bottom: 10px;
}
.nowrap {
white-space: nowrap;
background-color: #f8d7da;
margin-bottom: 10px;
}
.pre {
white-space: pre;
background-color: #cfe2ff;
margin-bottom: 10px;
}
.pre-wrap {
white-space: pre-wrap;
background-color: #fff3cd;
margin-bottom: 10px;
}
.pre-line {
white-space: pre-line;
background-color: #d1d1d1;
margin-bottom: 10px;
}
.break-spaces {
white-space: break-spaces;
background-color: #e2d1f9;
margin-bottom: 10px;
}
</style>
<div class="white-space-container normal">
<strong>normal:</strong> Testo con spazi multipli, il testo va a capo automaticamente.
</div>
<div class="white-space-container nowrap">
<strong>nowrap:</strong> Testo con spazi multipli, il testo non va a capo automaticamente e continua sulla stessa linea.
</div>
<div class="white-space-container pre">
<strong>pre:</strong> Testo con spazi multipli,
il testo mantiene spazi e ritorni a capo.
</div>
<div class="white-space-container pre-wrap">
<strong>pre-wrap:</strong> Testo con spazi multipli,
il testo mantiene spazi e va a capo se necessario.
</div>
<div class="white-space-container pre-line">
<strong>pre-line:</strong> Testo con spazi multipli,
gli spazi multipli sono ridotti ma i ritorni a capo sono mantenuti.
</div>
<div class="white-space-container break-spaces">
<strong>break-spaces:</strong> Testo con spazi multipli,
mantiene gli spazi anche alla fine e permette il wrapping sugli spazi.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
