Propriété CSS column-span
La propriété column-span définit si un élément s'étend sur une seule colonne ou sur toutes les colonnes. Il s'agit de l'une des propriétés CSS3. Elle possède quatre valeurs : none, all, initial et inherit. none est la valeur par défaut, qui maintient l'élément dans une seule colonne. La valeur all fait s'étendre l'élément sur toutes les colonnes. Cette propriété est utile pour les éléments larges, tels que les images ou les titres, vous permettant de choisir s'ils s'étendent sur toutes les colonnes ou restent dans une seule.
INFO
Un élément ne peut s'étendre sur plusieurs colonnes que s'il s'agit d'un élément de niveau bloc.
| Valeur initiale | none |
|---|---|
| S'applique à | éléments de niveau bloc en flux |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS Multi-column Layout Module Level 1 |
| Syntaxe DOM | object.style.columnSpan = "all"; (Remarque : les propriétés CSS utilisent le camelCase en JavaScript) |
Syntaxe
Syntaxe de la propriété CSS column-span
css
column-span: none | all | initial | inherit;Exemple : valeur none
html
<!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
Dans l'exemple suivant, le titre s'étend sur les quatre colonnes.
Exemple : valeur all
html
<!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
html
<!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
html
<!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>Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| 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. | Tester » |
| all | L'élément s'étend sur toutes les colonnes. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la fonction de la propriété 'column-span' en CSS ?