Propriedade column-span

A propriedade column-span define o número de colunas que um elemento deve abranger em um texto multicoluna. A propriedade aceita como valor um número 1, ou a palavra-chave all. Com o valor 1 o elemento abrangerá uma coluna, e com o valor all - todas as colunas.

Sintaxe

cssseletor {
  column-span: 1 | all;
}

Valor padrão: 1.

Exemplo

Neste exemplo, o título ficará dentro da primeira coluna:

html<div id="elem">
  <h2>Lorem ipsum dolor sit amet eu metus non</h2>
  some long text
</div>
css#elem h2 {
  column-span: 1;
  margin: 0;
}
#elem {
  column-count: 3;
  text-align: justify;
}

Результат:

Exemplo

E agora o título se estenderá por todas as colunas:

html<div id="elem">
  <h2>Lorem ipsum dolor sit amet eu metus non</h2>
  some long text
</div>
css#elem h2 {
  column-span: all;
  margin: 0;
}
#elem {
  column-count: 3;
  text-align: justify;
}

Результат:

Veja também

  • a propriedade column-count,
    que define o número de colunas
  • a propriedade column-width,
    que define a largura da coluna
  • a propriedade column-gap,
    que define o espaçamento entre as colunas
  • a propriedade column-rule,
    que define a borda entre as colunas
  • a propriedade columns,
    que é uma propriedade abreviada para multicoluna