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

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

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

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

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

правити

Порада

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

auto

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

автор: Svitlana

правити

length

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
column-width	1.0 -webkit-	1.5 -moz-	3.0 -webkit-	11.1	12.0	10

Підтримка: мобільні переглядачі

Переглядач
column-width	1.0 -webkit-	1.0 -moz-	3.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>

.cols {
    column-width: 100px;
}