Propriedade column-width

A propriedade column-width define a largura das colunas em texto multicoluna. O valor da propriedade pode ser qualquer unidade de tamanho, exceto porcentagens, ou a palavra-chave auto (padrão). Com o valor auto, o navegador determina automaticamente a largura ideal das colunas com base em column-count e column-gap.

Sintaxe

cssseletor {
  column-width: valor;
}

Exemplo . Largura especificada

Neste exemplo, a largura da coluna column-width foi definida como 150px, e sua quantidade column-count está como auto. Como resultado, a largura das colunas será 150px, e a quantidade de colunas e o espaçamento entre elas serão determinados automaticamente pelo navegador:

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

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

Результат:

Exemplo . Valor auto

Neste exemplo, o texto será dividido em 3 colunas (porque column-count está definido como 3), e sua largura será calculada automaticamente:

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

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

Результат:

Veja também