Propriété CSS column-span
La propriété CSS column-span définit si un élément occupe une ou toutes les colonnes. Découvrez les valeurs et des exemples.
La propriété CSS column-span contrôle si un élément reste à l'intérieur d'une seule colonne d'une mise en page multi-colonnes ou s'étend sur toutes les colonnes. C'est l'une des propriétés CSS3.
Cette page explique ce que fait column-span, les valeurs qu'elle accepte, des exemples exécutables pour chacune, quand l'utiliser et les pièges courants à éviter.
Le problème qu'elle résout
Lorsque vous divisez du texte en plusieurs colonnes avec column-count ou columns, chaque enfant du conteneur multi-colonnes s'écoule colonne par colonne — y compris les titres. Un titre de section que vous souhaitez afficher comme une bannière au-dessus du bloc entier se retrouverait autrement coincé dans la première colonne.
column-span: all sort un élément du flux de colonnes pour qu'il s'étende sur toute la largeur, tandis que le contenu au-dessus et en dessous continue de s'écouler en colonnes. C'est exactement ainsi que les mises en page de magazines et de journaux gèrent un titre au-dessus d'un corps de texte multi-colonnes.
.article {
column-count: 3;
}
.article h2 {
column-span: all; /* headline runs the full width above the 3 columns */
}Un élément ne peut s'étendre sur plusieurs colonnes que s'il s'agit d'un élément de niveau bloc dans le flux normal. Les éléments flottants, positionnés en absolu ou en ligne ignorent column-span.
| Valeur initiale | none |
|---|---|
| S'applique à | éléments de niveau bloc dans le flux normal |
| Hérité | Non. |
| Animatable | Non. |
| Version | CSS Multi-column Layout Module Level 1 |
| Syntaxe DOM | object.style.columnSpan = "all"; (Note: CSS properties use camelCase in JavaScript) |
Syntaxe
Syntaxe de la propriété CSS column-span
column-span: none | all | initial | inherit;Exemple : valeur 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>Résultat
Avec none, le titre est traité comme n'importe quel autre contenu et reste dans la première colonne. Dans l'exemple suivant, le même titre s'étend sur les quatre colonnes.
Exemple : valeur 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>Exemple : valeur initial
initial réinitialise column-span à sa valeur par défaut, qui est none — le titre se comporte donc exactement comme dans le premier exemple et reste dans une seule colonne.
<!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>Exemple : valeur inherit
inherit prend la valeur calculée de column-span depuis l'élément parent. Notez que column-span n'est pas hérité par défaut, vous n'utilisez donc ce mot-clé que lorsque vous souhaitez explicitement qu'un enfant copie le paramètre de son parent.
<!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>Quand utiliser column-span
- Les titres et en-têtes de section qui doivent se trouver au-dessus d'un corps de texte multi-colonnes, comme la manchette d'un journal.
- Les citations en exergue ou les encadrés que vous souhaitez faire ressortir du rythme des colonnes pour les mettre en valeur.
- Les médias larges — une image pleine largeur, un tableau ou un graphique qui paraîtrait à l'étroit dans une seule colonne étroite.
Pour tout le reste, laissez la valeur par défaut none afin que le contenu s'écoule naturellement entre les colonnes.
Points de vigilance
- Seuls
noneetallsont des valeurs d'extension. Il n'existe pas decolumn-span: 2pour s'étendre sur un nombre arbitraire de colonnes — c'est tout ou rien. - Un élément en extension divise le cadre de colonnes. Le contenu qui le précède remplit les colonnes, puis l'élément s'affiche en pleine largeur, et le contenu restant commence un nouvel ensemble de colonnes en dessous.
column-spanne fonctionne qu'à l'intérieur d'un conteneur multi-colonnes. Sanscolumn-countoucolumnssur le parent, la propriété n'a aucun effet.column-span: allpeut interférer avecbreak-insideet l'équilibrage des colonnes dans certains navigateurs, alors testez avec du contenu long.
Propriétés associées
column-count— définit le nombre de colonnes dans lesquelles le contenu est divisé.column-width— définit la largeur idéale de chaque colonne.columns— raccourci pourcolumn-widthetcolumn-count.column-gap— définit l'espace entre les colonnes.column-rule— trace une ligne entre les colonnes.
Valeurs
| Valeur | Description |
|---|---|
| none | Il s'agit de la valeur par défaut. L'élément ne s'étend pas sur toutes les colonnes ; il reste dans une seule colonne. |
| all | L'élément s'étend sur toutes les colonnes. |
| initial | Réinitialise la propriété à sa valeur par défaut (none). |
| inherit | Hérite la propriété de son élément parent. |