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):

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

#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):

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

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

Se även

egenskapen column-width,
som sätter kolumnens bredd
egenskapen column-count,
som sätter antalet kolumner
egenskapen column-gap,
som sätter mellanrummet mellan kolumnerna
egenskapen column-span,
som sätter antalet kolumner som ett element ska sträcka sig över
egenskapen columns,
som är en genvägsegenskap för flerkolumnslayout