Column-width häsiýeti

Column-width häsiýeti köp sütünli tekstiň sütün iniňligini belleýär. Häsiýetiň bahasy hökmünde ölçeg birlikleri, ýüzde birliklerden başga, ýa-da auto (deslapky ýagdaýy) açar sözi bolup biler. Auto bahasy bilen brauzer column-count we column-gap esasında sütünleriň iň amatly iniňligini özi saýlaýar.

Sintaksis

cssselektor {
  column-width: baha;
}

Mysal . Bellenen iniňlik

Bu mysalda sütün iniňligi column-width 150px hökmünde, olaryň sany bolsa column-count auto bahasynda bellendir. Netijede sütünleriň iniňligi 150px bolar, olaryň sany we aralaryndaky boşluk brauzer tarapyndan öz-özüne saýlanar:

html<div id="elem">
  some long text
</div>
css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Mysal . Auto bahasy

Bu mysalda tekst 3 sütüne bölüner (sebäbi column-width 3 bahasynda), emma olaryň iniňligi awtomatik kesgitleniler:

html<div id="elem">
  some long text
</div>
css#elem {
  column-width: auto;
  column-count: 3;
  text-align: justify;
}

Результат:

Şeýle-de garaň

  • sütün sanyny belleýän column-count häsiýeti,
  • sütünler arasyndaky boşlugy belleýän column-gap häsiýeti,
  • sütünler arasyndaky araçägni belleýän column-rule häsiýeti,
  • elementiň näçe sütün boýunça ýaýmalmalydygyny belleýän column-span häsiýeti,
  • köp sütünlilik üçin gysgaldylan häsiýet bolan columns häsiýeti,