column-count 속성

column-count 속성은 다단 텍스트의 권장 열 수를 설정합니다. 실제 열 수는 열 너비와 열 사이 간격 크기에 따라 지정된 값과 다를 수 있습니다.

구문

css선택자 {
  column-count: 숫자 | auto;
}

값

기본값: auto.

예시

이 예시에서 텍스트는 3개의 열로 나뉩니다 (물론 다단 레이아웃을 지원하는 브라우저에서만. 지원하지 않는 브라우저에서는 일반적인 한 열 텍스트로 표시됩니다):

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

css#elem {
  column-count: 3;
  text-align: justify;
}

Результат:

예시 . auto 값

이 예시에서는 열 너비 column-width를 150px로 설정하고, 열 수 column-count는 auto 값으로 설정했습니다. 브라우저가 필요한 열 수와 열 사이 간격을 자동으로 선택합니다:

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

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

함께 보기