Propriété CSS column-width
La propriété column-width définit la largeur des colonnes. Le navigateur calcule automatiquement le nombre de colonnes nécessaires pour afficher le contenu dans l'élément.
La propriété column-width fait partie des propriétés CSS3.
Elle possède deux valeurs : auto et length. auto est la valeur par défaut de la propriété column-width. length spécifie la largeur des colonnes en px, em et ch. La propriété column-width est flexible. Les colonnes passeront à une seule colonne si le conteneur n'est pas assez large pour accueillir deux colonnes à la largeur spécifiée. Si la largeur de la boîte est inférieure à la valeur spécifiée, la largeur de la colonne unique sera inférieure à la largeur de colonne spécifiée. Notez que si column-count est également spécifié, column-width agit comme une largeur maximale, et le navigateur ajuste le nombre de colonnes réel en fonction de l'espace disponible du conteneur.
Grâce à cette propriété, vous pouvez également créer des designs responsives pour différentes tailles d'écran.
INFO
Les navigateurs modernes prennent en charge column-width sans préfixes fournisseurs.
| Valeur initiale | auto |
|---|---|
| S'applique à | Conteneurs de blocs, à l'exception des boîtes enveloppes de tableau. |
| Héritée | Non. |
| Animable | Oui. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnWidth = "5px"; |
Syntaxe
Syntaxe de la propriété CSS column-width
column-width: auto | length | initial | inherit;Exemple de la propriété column-width :
Exemple de la propriété CSS column-width avec la propriété length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-width: 80px;
}
</style>
</head>
<body>
<h1>Column-width property example</h1>
<p>Here the width of the column is set to 80px.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Résultat
Exemple de la propriété column-width avec la valeur "auto" :
Exemple de la propriété column-width avec la valeur "auto" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-width: auto;
}
</style>
</head>
<body>
<h1>Column-width property example</h1>
<p>Here the width of the column is set to auto.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| auto | La largeur de la colonne est spécifiée par le navigateur. Il s'agit de la valeur par défaut. | |
| length | La largeur des colonnes est spécifiée par une longueur. | |
| initial | Définit la propriété à sa valeur par défaut. | |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété 'column-width' en CSS ?