Propriété CSS column-count

❮ Précédent Suivant ❯

La propriété column-count spécifie le nombre des colonnes qui séparent le contenu d'un élément. Elle a deux valeurs: auto et number. "Auto" est la valeur initiale de cette propriété. Le nombre des colonnes est déterminé par autres propriétés, telle que column-width. La valeur "number" spécifie le nombre des colonnes dans lesquelles le contenu de l'élément doit être introduit․

Valeur initiale	auto
Appliquée à	Blocage de conteneurs, sauf les enveloppes.
Héritée	Non.
Animable	Oui. Le nombre des colonnes est animable.
Version	CSS3
Syntaxe DOM	object.style.columnCount = "4";

Syntaxe

column-count: number | auto | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      -webkit-column-count: auto; /* Chrome, Safari, Opera */
      -moz-column-count: auto; /* Firefox */
      column-count: 3;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété column-count</h2>
    <div>
      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!

Voyons cet exemple, où la colonne est spécifiée comme 7.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      -webkit-column-count: 7; /* Chrome, Safari, Opera */
      -moz-column-count: 7; /* Firefox */
      column-count: 7;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété column-count</h2>
    <div>
      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
auto	Le nombre de colonnes est spécifié par d'autres propriétés. C'est la valeur initiale de cette propriété.
number	Spécifie le nombre de colonnes dans lesquelles le contenu des éléments doit être écrit.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.