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

chrome edge firefox safari opera
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?
Trouvez-vous cela utile?