Vlastnosť column-width

Vlastnosť column-width nastavuje šírku stĺpcov vo viacstĺpcovom texte. Hodnotou vlastnosti sú akékoľvek jednotky pre veľkosti, okrem percent, alebo kľúčové slovo auto (predvolené). Pri hodnote auto si prehliadač sám vyberá optimálnu šírku stĺpcov na základe column-count a column-gap.

Syntax

cssselektor {
  column-width: hodnota;
}

Príklad . Zadaná šírka

V tomto príklade je zadaná šírka stĺpca column-width na 150px, a ich počet column-count je nastavený na hodnotu auto. Výsledkom je, že šírka stĺpcov bude 150px, ich počet a medzery medzi nimi si prehliadač nastaví sám:

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

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

Результат:

Príklad . Hodnota auto

V tomto príklade bude text rozdelený na 3 stĺpce (pretože column-count je nastavené na hodnotu 3), zatiaľ čo ich šírka sa vypočíta automaticky:

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

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

Результат:

Pozri tiež