Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
column-rule-width
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.
La propriétéCSScolumn-rule-width définit la largeur de la ligne tracée entre les colonnes dans une mise en page multi-colonnes.
Exemple interactif
column-rule-width: thin;column-rule-width: medium;column-rule-width: thick;column-rule-width: 12px;<section> <p> Londres. Le trimestre de Michaelmas venait de se terminer, et le lord chancelier siégeait dans la salle de Lincoln's Inn. Un novembre implacable. Tant de boue dans les rues comme si les eaux venaient tout juste de se retirer de la surface de la terre, et il ne serait pas étonnant de rencontrer un Megalosaurus, quarante pieds de long environ, se dandinant comme un lézard éléphantesque en montant Holborn Hill. </p></section>#example-element { columns: 3; column-rule: solid; text-align: left;}Syntaxe
/* Valeurs avec un mot-clé */column-rule-width: thin;column-rule-width: medium;column-rule-width: thick;/* Valeurs detype <length> */column-rule-width: 1px;column-rule-width: 2.5em;/* Valeurs globales */column-rule-width: inherit;column-rule-width: initial;column-rule-width: revert;column-rule-width: revert-layer;column-rule-width: unset;La propriétécolumn-rule-width est définie grâce à une valeur de type<'border-width'>.
Valeurs
<'border-width'>Une valeur de longueur (
<length>) ou un mot-clé parmithin,mediumouthickqui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriétéborder-width.
Définition formelle
| Valeur initiale | medium |
|---|---|
| Applicabilité | éléments sur plusieurs colonnes |
| Héritée | non |
| Valeur calculée | une longueur absolue ou0 sicolumn-rule-style vautnone ouhidden |
| Type d'animation | unelongueur |
Syntaxe formelle
column-rule-width =
<line-width-list>|
<auto-line-width-list>
<line-width-list> =
<line-width-or-repeat>#
<auto-line-width-list> =
<line-width-or-repeat>#? ,<auto-repeat-line-width> ,<line-width-or-repeat>#?
<line-width-or-repeat> =
<line-width>|
<repeat-line-width>
<auto-repeat-line-width> =
repeat(auto ,[<line-width>]#)
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
<repeat-line-width> =
repeat([<integer [1,∞]>] ,[<line-width>]#)
<integer> =
<number-token>
Exemples
Définir une règle de colonne épaisse
HTML
<p> Ce texte est réparti en trois colonnes. La propriété `column-rule-width` est utilisée pour changer la largeur de la ligne tracée entre les colonnes. Ne trouvez-vous pas cela merveilleux ?</p>CSS
p { column-count: 3; column-rule-style: solid; column-rule-width: thick;}Résultat
Spécifications
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # crw |
Compatibilité des navigateurs
- Apprendre : Mise en page multi-colonnes
- La propriété
column-rule - La propriété
column-rule-color - La propriété
column-rule-style