Propriété CSS column-rule-width
La propriété CSS column-rule-width définit l'épaisseur du trait dessiné entre les colonnes d'une mise en page multi-colonnes, avec des exemples.
La propriété CSS column-rule-width définit l'épaisseur du trait (la ligne de séparation) dessiné entre les colonnes d'une mise en page multi-colonnes. Elle fonctionne exactement comme une largeur de bordure — mais au lieu d'entourer une boîte, le trait se situe dans l'espace entre les colonnes. C'est l'une des propriétés CSS3.
Seule, column-rule-width n'a aucun effet visible. Le trait n'apparaît que lorsque column-rule-style est défini sur autre chose que none (la valeur initiale), car une ligne sans style n'a rien à dessiner. Vous avez également besoin de plus d'une colonne — le trait n'est peint que dans les espaces qui séparent réellement des colonnes, et jamais dans l'espace vide laissé lorsque le contenu ne remplit pas toutes les colonnes.
Cette propriété accepte l'une des valeurs suivantes :
thin— un trait fin.medium— un trait moyen. C'est la valeur initiale.thick— un trait épais.<length>— une largeur explicite comme2pxou0.2em. Les pourcentages et les valeurs négatives ne sont pas autorisés.
La spécification laisse délibérément au navigateur le soin de définir l'épaisseur exacte en pixels de thin, medium et thick. Elle garantit uniquement l'ordre : thin ≤ medium ≤ thick. Lorsque vous avez besoin d'un résultat prévisible entre navigateurs, utilisez une <length>.
Dans la plupart des feuilles de style, vous définirez la largeur, le style et la couleur ensemble avec le raccourci column-rule plutôt que d'écrire trois déclarations séparées :
/* These two rules are equivalent */
column-rule: 15px groove #1c87c9;
column-rule-width: 15px;
column-rule-style: groove;
column-rule-color: #1c87c9;| Valeur initiale | medium |
|---|---|
| S'applique à | Les éléments multi-colonnes. |
| Hérité | Non. |
| Animatable | Oui. La largeur et la couleur du trait sont animables. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnRuleWidth = "5px"; |
Syntaxe
Syntaxe de la propriété CSS column-rule-width
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
<!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
<!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 avec la valeur « 15px » :
Exemple de la propriété CSS column-rule-width avec une valeur de longueur
<!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 | Essayez |
|---|---|---|
| medium | Le trait est moyen. C'est la valeur par défaut. | |
| thick | Le trait est épais. | |
| thin | Le trait est fin. | |
| length | Spécifie la largeur du trait. | |
| initial | Définit la propriété à sa valeur par défaut. | |
| inherit | Hérite la propriété de son élément parent. |
Points à garder à l'esprit
- Le trait n'occupe pas d'espace dans la mise en page. Comme un box-shadow, le trait est peint à l'intérieur du
column-gap. Un trait plus large que l'espace chevauchera le contenu des colonnes plutôt que d'éloigner les colonnes, alors assurez-vous que l'espace est suffisamment large pour la valeur choisie. - Pas de trait sans style. Si
column-rule-styleestnone(ou non défini), modifier la largeur n'a aucun effet visible. C'est la raison la plus courante pour laquelle un trait « n'apparaît pas ». - Longueurs uniquement — pas de pourcentages. Contrairement à de nombreuses tailles CSS,
column-rule-widthrefuse les valeurs en pourcentage et les valeurs négatives ; une valeur invalide fait ignorer toute la déclaration. - Elle est animable. Faire une transition sur la largeur produit un épaississement ou un amincissement progressif du séparateur.
Propriétés associées
Le trait multi-colonnes est contrôlé par une petite famille de propriétés que vous utiliserez généralement ensemble :
column-rule— le raccourci pour la largeur, le style et la couleur.column-rule-style— le style de ligne ; requis pour que la largeur soit visible.column-rule-color— la couleur du trait.column-countetcolumn-gap— définissent le nombre de colonnes et l'espace dans lequel le trait se situe.