Propriété CSS column-span

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.