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

Властивість column-rule-width у багатоколонковому тексті задає товщину ліній між колонками.

Властивість column-rule відображається як певна межа, яка з'являється між стовпцями на макеті з декількома стовпцями.

Властивість column-rule-width слід використовувати разом із властивостями column-rule-style, інакше використання цієї властивості не буде мати ефекту (через відсутність значення "стиль").

Значення:

Три змінні - thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину лінії. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.

правити

Порада

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

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

Порада

Специфікація не визначає чітко товщину кожного з ключових слів (thin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним: thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.

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

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

Синтаксис

column-rule-width: medium|thin|thick|length|initial|inherit;

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

medium

Звичайна лінія (4 пікселя). Без задання.

автор: Svitlana

правити

thin

Тонка лінія (2 пікселя)

автор: Svitlana

правити

thick

Товста лінія (6 пікселей)

автор: Svitlana

правити

length

Товщина лінії в пікселях або інших одиницях.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
column-rule-width	1.0 -webkit-	3.5 -moz-	3.0 -webkit-	11.1	12.0	10.0

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

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

Приклади

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

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

.cols {
    column-count: 3;
    column-rule-style: solid;
    margin-bottom: 12px;
}

.thin  { column-rule-width: 1px; }
.thick { column-rule-width: 8px; }