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;
}

Результат:

함께 보기