column-rule у CSS — скорочення для лінії між колонками

Властивість column-rule в багатоколонкові тексті малює лінію між колонками і визначає її параметри.

Властивість column-rule є узагальненою для установки всіх влативостей типу column-rule-:

  • column-rule-width
  • column-rule-style
  • column-rule-color

У багатоколонковому тексті задає колір, ширину та стиль ліній між колонками.

автор: Svitlana

Загальний опис

автор: NagarD

Синтаксис

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;

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

column-rule-width

Встановлює ширину лінії між колонками. Значення без задання середу medium

автор: Svitlana

column-rule-style

Встановлює стиль лінії між колонами. Значення без задання none

автор: Svitlana

column-rule-color

Встановлює колір лінії між колонами. Значення без задання співпадає з кольором елемента.

автор: Svitlana

initial

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

автор: Svitlana

inherit

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

автор: Svitlana

Значення без задання: medium none
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.columnRule="3px outset blue"

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
50 52 9 11.1 12 10
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
50 50 52 9

Приклади

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

Універсальний запис лінії-розділювача між колонками: товщина, стиль і колір разом — як у border.

HTML

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

CSS

.cols {
    column-count: 3;
    column-rule: 4px outset #ff00ff;
}
автор: Svitlana

Перші чотири блоки показують, як розкривається скорочення: повний запис, самий стиль (виходить 3px чорна), сама товщина без стилю (нічого) і різні стилі лінії. П'ятий і шостий — та сама пара рядків у двох порядках: скорочення після кольору стирає його, перед кольором — ні. Далі — лінія, товща за проміжок, яка наїжджає на текст, не змінивши ширини блока, і три блоки з різною кількістю тексту, де ліній рівно стільки, скільки стиків між заповненими колонками.

HTML

<p class="cap">Як розкривається скорочення:</p>
<div class="mc full"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">column-rule: 6px solid #c0392b</p>
<div class="mc styleonly"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">column-rule: solid — вийшло 3px чорного</p>
<div class="mc widthonly"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">column-rule: 10px — стилю немає, лінії теж</p>
<div class="mc dashed"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">column-rule: 6px dashed #2f6fd0</p>
<div class="mc double"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">column-rule: 8px double #2f6fd0</p>

<p class="cap">Та сама пара рядків у двох порядках:</p>
<div class="mc killed"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">колір, потім скорочення — чорна</p>
<div class="mc kept"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<p class="tag">скорочення, потім колір — червона</p>

<p class="cap">Лінія місця не займає — товща за проміжок, наїжджає на текст:</p>
<div class="mc fat"><p>текст текст текст текст текст текст текст текст текст текст текст текст</p></div>

<p class="cap">Ліній стільки, скільки стиків між заповненими колонками:</p>
<div class="mc three"><p>раз два три чотири пять шість сім вісім девять десять одинадцять дванадцять тринадцять чотирнадцять пятнадцять шістнадцять сімнадцять</p></div>
<p class="tag">заповнено три колонки — дві лінії</p>
<div class="mc three"><p>раз два три чотири пять шість сім вісім девять десять одинадцять дванадцять</p></div>
<p class="tag">заповнено дві — одна лінія</p>
<div class="mc three"><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;
    font: 13px/20px system-ui, sans-serif;
}

.mc p {
    margin: 0;
}

.full { column-rule: 6px solid #c0392b; }
.styleonly { column-rule: solid; }
.widthonly { column-rule: 10px; }
.dashed { column-rule: 6px dashed #2f6fd0; }
.double { column-rule: 8px double #2f6fd0; }

.killed {
    column-rule-color: #c0392b;
    column-rule: 6px solid;
}

.kept {
    column-rule: 6px solid;
    column-rule-color: #c0392b;
}

.fat {
    column-gap: 20px;
    column-rule: 60px solid #f2b134;
}

.three {
    column-count: 3;
    column-gap: 24px;
    column-rule: 6px solid #c0392b;
    height: 80px;
    column-fill: auto;
}
автор: NagarD

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

HTML

<p>Вибери потрібне значення для <code>column-rule</code>:</p>

<input type="number" id="width" placeholder="width" value="4" min="0" onchange="update()">
<select id="style" onchange="update()">
  <option value="none">none</option>
  <option value="hidden">hidden</option>
  <option value="dotted">dotted</option>
  <option value="dashed">dashed</option>
  <option value="solid" selected>solid</option>
  <option value="double">double</option>
  <option value="groove">groove</option>
  <option value="ridge">ridge</option>
  <option value="inset">inset</option>
  <option value="outset">outset</option>
</select>
<input type="color" id="color" onchange="update()">

<p id="text">Межі з шириною <strong>4px</strong>, стилем <strong>solid</strong> та кольору <strong>#000000</strong>.</p>

<hr>

<div id="block">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.</p>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  background: #f1f1f1;
  padding: 10px;
  margin-bottom: 16px;

  -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: 4px solid #000;
    -moz-column-rule: 4px solid #000;
         column-rule: 4px solid #000;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

JS

var text = document.getElementById('text');
var block = document.getElementById('block');
var width = document.getElementById('width');
var style = document.getElementById('style');
var color = document.getElementById('color');

function update() {
  block.style.columnRule = width.value + 'px ' +
  getVal(style) + ' ' +
  color.value;
  text.innerHTML = 'Межі з шириною <strong>' + width.value + 'px</strong>, стилем <strong>' + getVal(style) + '</strong> та кольору <strong>' + color.value + '</strong>';
}

function getVal(el) {
  var result = '';
  for (var i = 0; i < el.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (el.options[i].selected == true) {
      result = el.options[i].value;
    }
  }window.CP.exitedLoop(0);
  return result;
}
автор: Svitlana

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

HTML

<span>За замовчуванням, для багатоколокового тексту не задається жодних додаткових властивостей.</span>
<div class="multicol">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem pariatur culpa atque repellat non, hic, iure assumenda at officiis delectus quia, minima ipsa sequi asperiores aperiam iste provident porro ratione!</p>
</div>

<span>Але ми можемо встановити ширину, стиль, а також колір меж, які з'являються між стовпчиками за допомогою універсальної властивості <code>column-rule</code>.</span>
<br>
<div class="multicol rule">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem pariatur culpa atque repellat non, hic, iure assumenda at officiis delectus quia, minima ipsa sequi asperiores aperiam iste provident porro ratione!</p>
</div>

CSS

body {
  font-family: sans-serif;
  line-height: 1.45;
}

p {
  margin-top: 0;
}

.multicol {
  background: #f1f1f1;
  padding: 10px;
  margin-bottom: 16px;

  -webkit-column-gap: 38px;
     -moz-column-gap: 38px;
          column-gap: 38px;

  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
}

.multicol.rule {
  -webkit-column-rule: 8px solid gold;
    -moz-column-rule: 8px solid gold;
         column-rule: 8px solid gold;
}
автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід