Уласцівасць column-rule

Уласцівасць column-rule задае мяжу паміж калонкамі ў шматкалонкавым тэксце. Па прымаемых значэннях супадае з уласцівасцю border.

Прыклад . Тып solid

У гэтым прыкладзе тэкст разбярэцца на 3 калонкі з мяжамі паміж калонкамі ў выглядзе суцэльнай лініі таўшчынёй у 1px (адлегласць паміж слупкамі сфармуецца аўтаматычна, бо зададзены column-gap у значэнні 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;
}

Результат:

Прыклад . Уплыў column-gap

У гэтым прыкладзе тэкст разбярэцца на 3 калонкі з прамежкам паміж імі ў 50px. Мяжа пры гэтым пройдзе па сярэдзіне прамежку (справа і злева ад мяжы будзе па 25px):

html<div id="elem">
  some long text
</div>
css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Глядзіце таксама

  • уласцівасць column-width,
    якое задае шырыню калонкі
  • уласцівасць column-count,
    якое задае колькасць калонак
  • уласцівасць column-gap,
    якое задае прамежак паміж калонкамі
  • уласцівасць column-span,
    якое задае колькасць слупкоў, на якія павінен расцягвацца элемент
  • уласцівасць columns,
    якое з'яўляецца ўласцівасцю-скарачэннем для шматкалонкавасці