Propriété CSS column-rule-width
La propriété CSS column-rule-width définit la largeur de la règle entre les colonnes. La propriété column-rule-width fait partie des propriétés CSS3.
La propriété column-rule-width ne prend effet que lorsque column-rule-style n'est pas none.
Cette propriété prend les valeurs suivantes :
- medium
- épais
- fin
- longueur
INFO
La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. Cependant, ils suivent toujours cet ordre : thin ≤ medium ≤ thick.
| Valeur initiale | medium |
|---|---|
| S'applique à | Éléments multicol. |
| Héritée | Non. |
| Animable | Oui. La largeur et la couleur de la règle sont animables. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnRuleWidth = "5px"; |
Syntaxe
Syntaxe de la propriété CSS column-rule-width
css
column-rule-width: medium | thin | thick | length | initial | inherit;Exemple de la propriété column-rule-width :
Exemple de la propriété CSS column-rule-width avec la valeur thick
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
column-rule-color: #666;
column-rule-width: thick;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property example</h1>
<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-rule-width avec la valeur "thin" :
Exemple de la propriété CSS column-rule-width avec la valeur thin
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: thin;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property example</h1>
<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>Exemple de la propriété column-rule-width spécifiée comme "15px" :
Exemple de la propriété CSS column-rule-width avec la valeur length
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: groove;
column-rule-color: #1c87c9;
column-rule-width: 15px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property example</h1>
<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 » |
|---|---|---|
| medium | La règle est de largeur moyenne. Il s'agit de la valeur par défaut. | Tester » |
| thick | La règle est épaisse. | Tester » |
| thin | La règle est fine. | Tester » |
| length | Spécifie la largeur de la règle. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété 'column-rule-width' en CSS ?