Propriété CSS column-width

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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.