Свойство CSS column-rule
Сокращённое свойство column-rule задаёт стиль, ширину и цвет линии между колонками. Примеры и описание.
Сокращённое свойство column-rule определяет стиль, ширину и цвет линии, которая рисуется между колонками многоколоночного макета. Оно работает аналогично сокращению border, но вместо рамки вокруг элемента рисует одну вертикальную черту в каждом промежутке между колонками.
Линия является сугубо декоративной: она отображается внутри промежутка и не занимает собственного пространства. Увеличение ширины линии не раздвигает колонки — расстояние между ними меняет только column-gap. Именно поэтому толстая линия может визуально перекрывать текст по обеим сторонам, если промежуток слишком мал.
column-rule является сокращением для трёх полных свойств:
- column-rule-width — толщина линии.
- column-rule-style — стиль линии (
solid,dotted,dashedи др.). - column-rule-color — цвет линии.
Как и любое сокращение, пропущенные полные свойства сбрасываются до начальных значений. Так, column-rule: 5px solid; явно задаёт ширину и стиль, тогда как цвет возвращается к currentColor (цвет текста элемента), а ширина — к medium, если она опущена.
Когда использовать column-rule
Используйте column-rule всякий раз, когда вы разбиваете непрерывный текст на несколько колонок и хотите добавить видимый разделитель — макеты статей в газетном стиле, списки ссылок, группы ссылок в подвале или глоссарий. Ненавязчивая линия 1px solid #ddd помогает взгляду понять, где заканчивается одна колонка и начинается следующая, без лишней разметки.
Линия отображается только тогда, когда элемент действительно создаёт многоколоночный макет, то есть когда column-count или сокращение columns формирует более одной колонки. На однаколоночном элементе нет промежутков, поэтому ничего не рисуется.
column-rule — одно из свойств CSS3.
| Начальное значение | medium (ширина), none (стиль), currentColor (цвет) |
|---|---|
| Применяется к | Блочным контейнерам, создающим многоколоночный макет. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Цвет и ширина column-rule поддерживают анимацию. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.columnRule = "5px outset #ccc"; |
Синтаксис
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;Порядок трёх значений произвольный — браузер различает их по типу, поэтому column-rule: dotted 5px #ccc так же допустимо, как и column-rule: 5px dotted #ccc. Как и в случае с border, значение none (или отсутствие стиля) означает, что линия не будет нарисована, поскольку column-rule-style по умолчанию равно none.
Пример свойства column-rule:
Пример с указанием ширины, стиля и цвета
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: 5px dotted #ccc;
}
</style>
</head>
<body>
<h1>Column-rule example</h1>
<p>Here the column-rule is set to 5px dotted gray.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Результат
Если указано одно значение, оно интерпретируется как column-rule-style (остальные два полных свойства сохраняют начальные значения).
Пример свойства column-rule с одним значением:
Пример с одним значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: dashed;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to only "dashed".</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Пример свойства column-rule с указанием ширины, стиля и цвета:
Пример со всеми заданными значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
column-rule: 10px groove #ccc;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to 10px groove gray.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| column-rule-width | Определяет ширину линии между колонками. Значение по умолчанию — "medium". |
| column-rule-style | Определяет стиль линии между колонками. Значение по умолчанию — "none". |
| column-rule-color | Задаёт цвет линии. Значение по умолчанию — текущий цвет элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
На что обратить внимание
- Линия требует многоколоночного контекста. Задайте column-count (или сокращение columns) на том же элементе, иначе линия не появится.
- Отсутствие стиля означает отсутствие линии. Поскольку
column-rule-styleпо умолчанию равноnone, записьcolumn-rule: 5px #ccc;ничего не нарисует. Всегда указывайте ключевое слово стиля, напримерsolidилиdotted. - Линия не влияет на макет. Её ширина берётся из существующего промежутка, а не добавляется к нему. Если толстая линия перекрывает текст, увеличьте column-gap — линия будет центрирована внутри этого промежутка.
- Линия не рисуется перед первой или после последней колонки. Черта рисуется только между соседними колонками, но никогда — по внешним краям.
Поддержка браузерами
column-rule широко поддерживается во всех современных браузерах (Chrome, Edge, Firefox, Safari и Opera). Более старые сборки WebKit и Gecko требовали префиксов -webkit- и -moz-, однако сегодня безопасно использовать column-rule без префиксов.