Egenskapen column-rule

Egenskapen column-rule setter en kantlinje mellom kolonner i flerspalts tekst. Den tar de samme verdiene som egenskapen border.

Eksempel . Type solid

I dette eksempelet vil teksten deles inn i 3 kolonner med kantlinjer mellom kolonnene i form av en heltrukken linje med en tykkelse på 1px (avstanden mellom kolonnene vil bli dannet automatisk, siden column-gap er satt til verdien 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;
}

Результат:

Eksempel . Påvirkning av column-gap

I dette eksempelet vil teksten deles inn i 3 kolonner med et mellomrom mellom dem på 50px. Kantlinjen vil gå midt i mellomrommet (Det vil være 25px på hver side av kantlinjen):

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 også