column-rule-width у CSS — товщина лінії між колонками
автор: Svitlana
Загальний опис
автор: NagarD
- Порада
-
Ви можете використовувати універсальну властивість
автор: Svitlanacolumn-rule, щоб встановити ширину, стиль і колір стовпчика в одному місці. - Порада
-
Специфікація не визначає чітко товщину кожного з ключових слів (
автор: Svitlanathin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним:thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.
Синтаксис
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
| Значення без задання: | medium |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.columnRuleWidth="10px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 50 | 52 | 9 | 11.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 50 | 50 | 52 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Товщина розділювача: зверху тонка лінія в 1px, знизу — та сама, але 8px.
HTML
<div class="cols thin">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>
<div class="cols thick">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>CSS
.cols {
column-count: 3;
column-rule-style: solid;
margin-bottom: 12px;
}
.thin { column-rule-width: 1px; }
.thick { column-rule-width: 8px; }Приклад використання
HTML
<span>За замовчуванням, ширина межі (між стовпчиками у багатоколонковому тексті, як тут) дорівнює ключовому слову <em>medium</em>.</span>
<div class="multicol">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut laudantium, labore, itaque sed doloribus voluptates quos quam suscipit animi odio repudiandae. Alias voluptas dolorem debitis corrupti quisquam velit laborum atque!</p>
</div>
<span>Але ми можемо змінити це, оголовиши властивість <code>column-rule-width</code> та прописавши для неї потрібне значення: ключове слово або число (значення у пікселях). Наприклад, для цього контейнера був прописана ширина у <em>8px</em>.</span>
<div class="multicol width">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque enim excepturi maxime architecto vitae harum laboriosam? Dolorem, esse rerum iste magni perferendis aliquam eum fuga excepturi minima quod, dolorum ea.</p>
</div>CSS
body {
font-family: sans-serif;
line-height: 1.45;
}
p {
margin-top: 0;
}
.multicol {
background: #f1f1f1;
padding: 10px;
margin-bottom: 16px;
margin-top: 15px;
-webkit-column-gap: 38px;
-moz-column-gap: 38px;
column-gap: 38px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-rule-color: gold;
-moz-column-rule-color: gold;
column-rule-color: gold;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
.multicol.width {
-webkit-column-rule-width: 8px;
-moz-column-rule-width: 8px;
column-rule-width: 8px;
}Угорі — три ключові слова з підписаними виміряними значеннями й дві пастки: товщина без стилю (нічого не намальовано) і недійсний відсоток. Далі — та сама лінія 20px у проміжку 40px і 60px у проміжку 20px: у другому випадку вона наїжджає на текст, а ширина блока не змінюється. Унизу — три блоки з різною кількістю тексту: на три заповнені колонки припадає дві лінії, на дві — одна, на одну — жодної.
HTML
<p class="cap">Ключові слова:</p>
<div class="mc thin"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">thin — 1px</p>
<div class="mc medium"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">medium — 3px, типове</p>
<div class="mc thick"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">thick — 5px</p>
<p class="cap">Пастки:</p>
<div class="mc nostyle"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">12px без column-rule-style — лінії немає</p>
<div class="mc percent"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">50% — недійсно, лишилося medium</p>
<p class="cap">Лінія місця не займає: 60px у проміжку 20px наїжджає на текст:</p>
<div class="mc fat"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="cap">Ліній стільки, скільки СТИКІВ між заповненими колонками:</p>
<div class="mc three full"><p>раз два три чотири пять шість сім вісім девять десять одинадцять дванадцять тринадцять чотирнадцять пятнадцять шістнадцять сімнадцять</p></div>
<p class="tag">три колонки заповнено — дві лінії</p>
<div class="mc three full"><p>раз два три чотири пять шість сім вісім девять десять одинадцять дванадцять</p></div>
<p class="tag">заповнено дві — одна лінія</p>
<div class="mc three full"><p>раз два</p></div>
<p class="tag">заповнено одну — жодної</p>CSS
.cap {
margin: 20px 0 8px;
max-width: 620px;
font: 600 .9em/1.45 system-ui, sans-serif;
color: #5a6472;
}
.tag {
margin: 4px 0 12px;
font: .8em/1.35 system-ui, sans-serif;
color: #5a6472;
}
.mc {
column-count: 2;
column-gap: 40px;
width: 400px;
padding: 6px;
background: #eef1f5;
column-rule-style: solid;
column-rule-color: #c0392b;
font: 13px/20px system-ui, sans-serif;
}
.mc p {
margin: 0;
}
.thin { column-rule-width: thin; }
.medium { column-rule-width: medium; }
.thick { column-rule-width: thick; }
.nostyle {
column-rule-style: none;
column-rule-width: 12px;
}
.percent { column-rule-width: 50%; }
.fat {
column-gap: 20px;
column-rule-width: 60px;
}
.three {
column-count: 3;
column-gap: 24px;
column-rule-width: 6px;
}
.full {
height: 80px;
column-fill: auto;
}Динамічний приклад зі значенням у вигляді числа
HTML
<p>Вибери потрібне значення для <code>column-rule-width</code>:</p>
<p>Ця властивість у багатоколонковому тексті задає ширину ліній між колонками. У цьому прикладі Ви побачите як на ширину меж впливає значення у пікселях.</p>
<input type="number" id="val" placeholder="число" value="1">
<hr>
<div id="block">
<p>За замовчуванням, ширина межі (між стовпчиками у багатоколонковому тексті, як тут) дорівнює ключовому слову <em>medium</em>.</p>
<p>Але ми можемо змінити це, оголовиши властивість <code>column-rule-width</code> та прописавши для неї потрібне значення: ключове слово або число (значення у пікселях).</p>
</div>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: monospace;
font-size: 17px;
line-height: 1.5;
color: #222;
}
p {
margin-top: 0;
}
.inputs {
padding: 8px 16px;
font-size: 19px;
}
#block {
background: #f1f1f1;
padding: 10px;
transition: column-rule-width .15s ease-in;
-webkit-column-gap: 38px;
-moz-column-gap: 38px;
column-gap: 38px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-color: gold;
-moz-column-rule-color: gold;
column-rule-color: gold;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
#text {
height: 60px;
background-color: #eee;
padding: 16px 0;
}
message {
display: none;
}JS
document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('column-rule-width', this.value + 'px'));
}));Коментарі
Коментарів ще немає — будьте першим!