Savybė column-width

Savybė column-width nustato stulpelių plotį daugiacilpiame tekste. Savybės reikšmė gali būti bet kuris dydžio vienetas, išskyrus procentus, arba raktažodis auto (numatytasis). Kai reikšmė auto, naršyklė pati parenka optimalų stulpelių plotį, remdamasi column-count ir column-gap.

Sintaksė

cssselektorius {
  column-width: reikšmė;
}

Pavyzdys . Nurodytas plotis

Šiame pavyzdyje nurodytas stulpelio plotis column-width 150px, o jų kiekis column-count yra nustatytas į auto. Dėl to stulpelių plotis bus 150px, o jų kiekį ir tarpus tarp jų naršyklė parinks pati:

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

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

Результат:

Pavyzdys . Reikšmė auto

Šiame pavyzdyje tekstas bus suskirstytas į 3 stulpelius (nes column-count yra nustatytas į 3), o jų plotis bus apskaičiuotas automatiškai:

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

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

Результат:

Taip pat žiūrėkite