Propriété CSS column-span
La propriété column-span spécifie si l'élément s'étend sur une colonne ou toutes les colonnes. Cette propriété a deux valeurs: none et all. "None" est la valeur initiale de la propriété color-span. Cela fait l'élément s'étendre sur une colonne. La valeur "all" définit que l'élément doit s'étendre sur toutes les colonnes.
La propriété column-span peut faire les grandes images s'étendre. Mais elle ne permet des images de s'étendre plusieurs colonnes. Elle permet de choisir si l'image doit s'étendre sur toutes les colonnes ou ne pas s'étandre du tout.
Un élément peut s'étendre sur les colonnes seulement s'il est un élément du niveau bloc.
Valeur initiale | none |
Appliquée à | Éléments de type bloc participant au flux |
Héritée | Non. |
Animable | Non. |
Version | CSS3 |
Syntaxe DOM | object.style.columnSpan = "all"; |
Syntaxe
column-span: none | all | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
h2 {
-webkit-column-span: none; /* Chrome, Safari, Opera */
column-span: none;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum est simplement un texte</h2>
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
</div>
</body>
</html>
Dans l'exemple suivant, le titre s'étend sur tous les quatre colonnes:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum est simplement un texte</h2>
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
</div>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
none | C'est la valeur initiale. L'élément ne s'étend pas sur toutes les colonnes. Il s'étend sur une colonne. |
all | L'élément s'étend sure toutes les colonnes. |
initial | Définit la valeur initiale. |
inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
50.0 -webkit- |
12.0 -webkit- |
65.0+ |
3.0 -webkit- |
11.1 + 15.0 -webkit- |
Pratiquez vos connaissances
Quelle est la bonne utilisation et la bonne définition de la propriété 'column-span' en CSS?
Correcte!
Incorrecte!