Перейти к содержанию

column-rule

Свойство column-rule в многоколоночном тексте отрисовывает линию между колонок и определяет её параметры.

Демо

Колонки и таблицы

Синтаксис

1
2
3
4
5
6
7
8
9
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

/* Global values */
column-rule: inherit;
column-rule: initial;
column-rule: unset;

Значения

Все параметры линии, а именно, толщина, её стиль и цвет задаются как отдельными свойствами, так и с помощью универсального свойства column-rule.

Свойство column-rule-width определяет толщину линии. Для управления стилем линии предоставляется несколько значений column-rule-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили линии

column-rule-color устанавливает цвет линии, значение может быть в любом допустимом для CSS формате.

Значение по-умолчанию:

1
column-rule: medium none;

Применяется к блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Спецификации

Примечание

Firefox поддерживает свойство -moz-column-rule.

Safari, Chrome и Аndroid поддерживают свойство -webkit-column-rule.

Поддержка браузерами

Can I Use multicolumn? Data on support for the multicolumn feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>column-rule</title>
    <style>
      .book {
        column-count: 3;
        column-width: 200px;
        column-rule: 1px solid #ccc;
        -moz-column-count: 3;
        -moz-column-width: 200px;
        -moz-column-rule: 1px solid #ccc;
        -webkit-column-count: 3;
        -webkit-column-width: 200px;
        -webkit-column-rule: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="book">
      Как было показано выше, кризис жанра дает звукоряд, и
      здесь в качестве модуса конструктивных элементов
      используется ряд каких-либо единых длительностей.
      Фьюжн, по определению, полифигурно варьирует
      гармонический интервал, и если в одних голосах или
      пластах музыкальной ткани сочинения еще продолжаются
      конструктивно-композиционные процессы предыдущей
      части, то в других — происходит становление новых.
      Трехчастная фактурная форма, в первом приближении,
      возможна. Форшлаг изящно продолжает хамбакер, и если в
      одних голосах или пластах музыкальной ткани сочинения
      еще продолжаются конструктивно-композиционные процессы
      предыдущей части, то в других — происходит становление
      новых.
    </div>
  </body>
</html>

Комментарии