Column-width касиети

column-width касиети көп тилкелүү тексттеги тилкелердин туурасын коёт. Касиеттин мааниси катары пайыздарды кошпогондо, каалаган өлчөө бирдиктери же auto (демейки) ачкыч сөзү кызмат кылат. auto маанисинде браузер column-count жана column-gap негизинде тилкелердин оптималдуу туурасын өзү тандайт.

Синтаксис

cssтандоочу {
  column-width: маани;
}

Мисал . Көрсөтүлгөн туура

Бул мисалда тилкенин туурасы column-width 150px деп көрсөтүлгөн, ал эми алардын саны column-count auto маанисинде турат. Натыйжада тилкелердин туурасы 150px болот, алардын санын жана алардын ортосундагы аралыкты браузер өзү тандайт:

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

Результат:

Мисал . Auto мааниси

Бул мисалда текст 3 тилкеге бөлүнөт (column-width 3 маанисинде тургандыктан), бирок алардын туурасы автоматтык түрдө эсептелет:

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

Результат:

Дагы караңыз

  • тилкелердин санын коётгон column-count касиети,
  • тилкелердин ортосундагы аралыкты коётгон column-gap касиети,
  • тилкелердин ортосундагы чекти коётгон column-rule касиети,
  • элемент канча тилкеге созулушу керектигин коётгон column-span касиети,
  • көп тилкелүүлүк үчүн кыскартылган касиет болгон columns касиети,