Propriété CSS column-count

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>

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>

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.

Support de Navigateurs

50.0
-webkit-
12.0
-webkit-
52.0
+ 1.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-


Trouvez-vous cela utile?

Articles Associées