Właściwość column-width

Właściwość column-width ustawia szerokość kolumn w tekście wielokolumnowym. Wartością właściwości są dowolne jednostki wielkości, z wyjątkiem procentów, lub słowo kluczowe auto (domyślnie). Przy wartości auto przeglądarka sama dobiera optymalną szerokość kolumn na podstawie column-count i column-gap.

Składnia

cssselektor {
  column-width: wartość;
}

Przykład . Określona szerokość

W tym przykładzie określono szerokość kolumny column-width na 150px, a ich liczba column-count jest ustawiona na wartość auto. W rezultacie szerokość kolumn wyniesie 150px, a ich liczbę i odstępy między nimi przeglądarka dobierze sama:

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

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

Результат:

Przykład . Wartość auto

W tym przykładzie tekst zostanie podzielony na 3 kolumny (ponieważ column-width jest ustawione na wartość 3), a ich szerokość zostanie obliczona automatycznie:

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

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

Результат:

Zobacz też