CSS tab-size
La proprietà CSS3 tab-size definisce la larghezza visiva delle tabulazioni
La proprietà tab-size in CSS3 consente di controllare quanti spazi equivalgono a un carattere di tabulazione all’interno di un testo preformattato. È particolarmente utile nei blocchi di codice o nei file di testo tecnici, dove la formattazione è essenziale.
Sintassi
Significato dei valori principali:
<numero>: Specifica il numero di spazi visualizzati per ogni tabulazione. Esempio:
tab-size: 4;.<lunghezza>: Definisce la larghezza della tabulazione in unità CSS (px, em, rem, ecc.). Supportato parzialmente nei browser.
Esempio proprietà: tab-size
Codice Esempio: tab-size
.tab-size-2 {
tab-size: 2;
font-family: monospace;
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 10px;
border-left: 4px solid #61afef;
}.tab-size-8 {
tab-size: 8;
font-family: monospace;
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 10px;
border-left: 4px solid #e06c75;
}
Contenuto Esempio: tab-size
Esempio di utilizzo della proprietà tab-size
Nel seguente esempio, viene mostrato lo stesso testo con tab-size impostato a valori diversi per evidenziare l'effetto visivo delle tabulazioni:
tab-size: 2tab-size: 8Esempio di utilizzo simulato della proprietà tab-size
Nel seguente esempio, simuliamo l'effetto di tabulazioni da 2 e 8 spazi utilizzando per mostrare la differenza visiva.
HTML e CSS completo per l'esempio:
<style>
.tab-size-2 {
tab-size: 2;
font-family: monospace;
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 10px;
border-left: 4px solid #61afef;
}
.tab-size-8 {
tab-size: 8;
font-family: monospace;
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 10px;
border-left: 4px solid #e06c75;
}
</style>
<div class="tab-size-2">
function demo() {\t
\tlet x = 5;
\treturn x;
}
</div>
<div class="tab-size-8">
function demo() {\t
\tlet x = 5;
\treturn x;
}
</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
