Propriété CSS column-width

La propriété column-width définit la largeur des colonnes. Si la largeur de la boîte est plus étroite que la valeur spécifiée, la largeur de la seule colonne sera plus petite que la largeur de colonne spécifiée. Elle a deux valeus: auto et length. "Auto" est la valeur initiale de la propriété column-width. "Length" spécifie la largeur des colonnes en px, em et ch.

Quelques extensions de la propriété sont ajoutées, telle que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les versions anciennes d'Opera etc.
Valeur initiale auto
Appliquée à Conteneurs bloc à l'exception boîtes d'emballage de table.
Héritée Non.
Animable Oui. La bordure et la largeur sont animable.
Version CSS3
Syntaxe DOM object.style.columnRuleWidth = "5px";

Syntaxe

column-width: auto | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      -webkit-column-width: 80px; /* Chrome, Safari, Opera */
      -moz-column-width: 80px; /* Firefox */  
      column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété column-width</h2>
    <p>Ici la largeur de la colonne est définie à 80px.</p>
    <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 La largeur de la colonne est spécifiée par le navigateur.
C'est la valeur initiale.
length La largeur de la colonne est spécifiée par length.
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-
50.0
+ 11.5 -moz-
3.0
-webkit-
11.1 +


Trouvez-vous cela utile?

Articles Associées