Egenskapen column-rule

Egenskapen column-rule sätter en kantlinje mellan kolumnerna i text med flera kolumner. De accepterade värdena är desamma som för egenskapen border.

Exempel . Typen solid

I detta exempel kommer texten att delas upp i 3 kolumner med kantlinjer mellan kolumnerna i form av en heldragen linje med en tjocklek på 1px (avståndet mellan kolumnerna skapas automatiskt, eftersom column-gap är satt till värdet 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;
}

Результат:

Exempel . Påverkan av column-gap

I detta exempel kommer texten att delas upp i 3 kolumner med ett mellanrum mellan dem på 50px. Kantlinjen kommer att gå i mitten av mellanrummet (till vänster och höger om kantlinjen kommer det att finnas 25px vardera):

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

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

Результат:

Se även