column-span
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2020.
La propriété CSS column-span permet à un élément de s'étendre sur l'ensemble des colonnes lorsque sa valeur est all.
Exemple interactif
column-span: none;
column-span: all;
<section id="default-example">
<div class="multicol-element">
<p>
Londres. Le trimestre de Michaelmas venait de se terminer, et le lord
chancelier siégeait dans la salle de Lincoln's Inn.
</p>
<div id="example-element">Étendue ?</div>
<p>
Un novembre implacable. Tant de boue dans les rues comme si les eaux
venaient tout juste de se retirer de la surface de la terre, et il ne
serait pas étonnant de rencontrer un Megalosaurus, quarante pieds de long
environ, se dandinant comme un lézard éléphantesque en montant Holborn
Hill.
</p>
</div>
</section>
.multicol-element {
width: 100%;
text-align: left;
column-count: 3;
}
.multicol-element p {
margin: 0;
}
#example-element {
background-color: rebeccapurple;
padding: 10px;
color: white;
}
Syntaxe
css
/* Valeurs avec un mot-clé */
column-span: none;
column-span: all;
/* Valeurs globales */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;
La propriété column-span est définie par l'une des valeurs listées ci‑dessous.
Valeurs
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | éléments de type bloc participant au flux |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
column-span =
none |
<integer [1,∞]> |
all |
auto
<integer> =
<number-token>
Exemples
>Faire en sorte qu'un titre s'étende sur toutes les colonnes
Dans cet exemple, le titre s'étend sur l'ensemble des colonnes de l'article.
HTML
html
<article>
<h2>Titre s'étendant sur toutes les colonnes</h2>
<p>
Le h2 doit s'étendre sur toutes les colonnes. Le reste du texte doit être
réparti entre les colonnes.
</p>
<p>
Ceci est un bloc de texte réparti en trois colonnes grâce à la propriété CSS
`columns`. Le texte est réparti de façon égale entre les colonnes.
</p>
<p>
Ceci est un bloc de texte réparti en trois colonnes grâce à la propriété CSS
`columns`. Le texte est réparti de façon égale entre les colonnes.
</p>
<p>
Ceci est un bloc de texte réparti en trois colonnes grâce à la propriété CSS
`columns`. Le texte est réparti de façon égale entre les colonnes.
</p>
<p>
Ceci est un bloc de texte réparti en trois colonnes grâce à la propriété CSS
`columns`. Le texte est réparti de façon égale entre les colonnes.
</p>
</article>
CSS
css
article {
columns: 3;
}
h2 {
column-span: all;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Multi-column Layout Module Level 1> # column-span> |
Compatibilité des navigateurs
Voir aussi
- Étendre et équilibrer les colonnes
- Éléments en ligne
- L'interface API
HTMLSpanElement