css властивість column-width


Властивість column-width задає ширину стовпчика в багатоколонковому тексті.

Властивість `column-width`

Властивість column-width визначає мінімальну ширину стовпця. Кількість стовпчиків буде максимальною кількістю стовпців, які можуть вміститися у контейнер, без стовпця, що має ширину менше, ніж значення column-width. Фактична ширина стовпчика може бути меншою, ніж значення ширини стовпчика, якщо ширина контейнера менша.

Це дозволяє створити елементи, які відповідають різним розмірам екрана. Особливо за наявності властивості column-count, яка має пріоритет, для встановлення точної ширини стовпчика, усі значення довжини повинні бути вказані. У горизонтальному тексті це width, column-width, column-gap, та column-rule-width

Ви можете вказати ширину стовпців як автоматичну (тобто auto) або конкретну величину довжини.

Нотатка:

Реальна ширина колонки може бути більшою за вказане вами значення.

Порада:

Ви також можете використовувати властивість columns, щоб встановити ширину та кількість стовпців відразу одним правилом.

Синтаксис

column-width: auto|length|initial|inherit;

Властивість column-width може отримувати 4 значення:

auto

Ширину стовпчиків буде визначено браузером. Значення без задання.

length

Ширина стовпців

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання: auto
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.columnWidth="100px"

Переглядачі

Переглядач
column-width

1.0 -webkit-

10

1.5 -moz-

3.0 -webkit-

11.1

12.0

Переглядач
column-width

1.0 -webkit-

1.0 -moz-

3.0 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Значення у дії

Приклад використання

Синтаксис

div { 


  -webkit-column-width: 100px; /* Chrome, Safari, Opera */ 


  -moz-column-width: 100px; /* Firefox */ 


  column-width: 100px; 


}

Додаткові посилання