Propriété column-rule

La propriété column-rule définit une bordure entre les colonnes dans un texte multicolonne. Elle correspond, en termes de valeurs acceptées, à la propriété border.

Exemple . Type solid

Dans cet exemple, le texte sera divisé en 3 colonnes avec des bordures entre les colonnes sous la forme d'une ligne continue d'une épaisseur de 1px (la distance entre les colonnes sera formée automatiquement, puisque column-gap est défini sur la valeur normal) :

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

Exemple . Influence de column-gap

Dans cet exemple, le texte sera divisé en 3 colonnes avec un espace entre elles de 50px. La bordure passera ainsi au milieu de l'espace (il y aura 25px à droite et à gauche de la bordure) :

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Voir aussi