Proprietà CSS column-span
La proprietà CSS column-span definisce come un elemento si estende su una o tutte le colonne. Scopri i valori e guarda esempi pratici.
La proprietà CSS column-span controlla se un elemento rimane all'interno di una singola colonna di un layout multi-colonna oppure si estende su tutte le colonne. È una delle proprietà CSS3.
Questa pagina illustra cosa fa column-span, i valori che accetta, esempi eseguibili per ciascuno, quando utilizzarla e le insidie più comuni.
Qual è il problema che risolve
Quando si suddivide il testo in più colonne con column-count o columns, ogni figlio del contenitore multi-colonna scorre colonna per colonna — incluse le intestazioni. Un'intestazione di sezione che si vuole usare come banner sull'intero blocco si troverebbe altrimenti compressa all'interno della prima colonna.
column-span: all estrae un elemento dal flusso delle colonne in modo che occupi tutta la larghezza, mentre il contenuto sopra e sotto di esso continua a scorrere nelle colonne. Questo è esattamente il modo in cui i layout di riviste e giornali gestiscono un titolo sopra il testo del corpo su più colonne.
.article {
column-count: 3;
}
.article h2 {
column-span: all; /* headline runs the full width above the 3 columns */
}Un elemento può estendersi sulle colonne solo se è un elemento block-level nel flusso normale. Gli elementi flottanti, posizionati in modo assoluto o inline ignorano column-span.
| Valore iniziale | none |
|---|---|
| Si applica a | elementi block-level nel flusso normale |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS Multi-column Layout Module Level 1 |
| Sintassi DOM | object.style.columnSpan = "all"; (Nota: le proprietà CSS usano il camelCase in JavaScript) |
Sintassi
Sintassi della proprietà CSS column-span
column-span: none | all | initial | inherit;Esempio: valore none
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: none;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Risultato
Con none, l'intestazione viene trattata come qualsiasi altro contenuto e rimane all'interno della prima colonna. Nell'esempio successivo, la stessa intestazione si estende su tutte e quattro le colonne.
Esempio: valore all
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Esempio: valore initial
initial reimposta column-span al suo valore predefinito, che è none — quindi l'intestazione si comporta esattamente come nel primo esempio e rimane all'interno di una sola colonna.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: initial;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Esempio: valore inherit
inherit prende il valore calcolato di column-span dall'elemento padre. Da notare che column-span non viene ereditato per impostazione predefinita, quindi si usa questa parola chiave solo quando si vuole esplicitamente che un figlio copi l'impostazione del genitore.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: inherit;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Quando usare column-span
- Titoli e intestazioni di sezione che devono comparire sopra il testo del corpo su più colonne, come la testata di un giornale.
- Citazioni in evidenza o callout che si vuole usare per spezzare il ritmo delle colonne e dare enfasi.
- Contenuti multimediali di grandi dimensioni — un'immagine a tutta larghezza, una tabella o un grafico che risulterebbe compresso all'interno di una singola colonna stretta.
Per tutto il resto, lasciare il valore predefinito none in modo che il contenuto scorra naturalmente tra le colonne.
Aspetti da tenere d'occhio
- Solo
noneeallsono valori di estensione. Non esiste uncolumn-span: 2per estendersi su un numero arbitrario di colonne — è tutto o niente. - Un elemento che si estende divide il box della colonna. Il contenuto precedente riempie le colonne, poi l'elemento occupa tutta la larghezza, dopodiché il contenuto rimanente inizia un nuovo insieme di colonne al di sotto.
column-spanfunziona solo all'interno di un contenitore multi-colonna. Senzacolumn-countocolumnssul genitore, la proprietà non ha effetto.column-span: allpuò interferire conbreak-insidee il bilanciamento delle colonne in alcuni browser, quindi è opportuno testare il comportamento con contenuti lunghi.
Proprietà correlate
column-count— imposta il numero di colonne in cui viene suddiviso il contenuto.column-width— imposta la larghezza ideale di ciascuna colonna.columns— abbreviazione percolumn-widthecolumn-count.column-gap— imposta lo spazio tra le colonne.column-rule— disegna una linea tra le colonne.
Valori
| Valore | Descrizione |
|---|---|
| none | È il valore predefinito. L'elemento non si estende su tutte le colonne; rimane in una sola colonna. |
| all | L'elemento si estende su tutte le colonne. |
| initial | Imposta la proprietà al suo valore predefinito (none). |
| inherit | Eredita la proprietà dall'elemento padre. |