column-rule

Можно задать декоративную линию между колонками, если текст свёрстан как в газете.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Как понять

Скопировано

Свойство column-rule является шорткатом для свойств:

Можно писать значения в любом порядке, разделяя пробелами, браузер сам поймёт, что мы от него хотим. Но общепринятым форматом является вид «ширина → стиль → цвет»‎: column-rule-widthcolumn-rule-stylecolumn-rule-color. Можно не указывать ширину и цвет, но стиль линии указывается обязательно – у column-rule-style нет значения по умолчанию и браузер не поймёт, какую линию нужно нарисовать.

Как пишется

Скопировано

Для того чтобы задать между колонками красную пунктирную линию шириной 2 px, мы напишем:

        
          
          p {  column-rule: 2px dashed red;}
          p {
  column-rule: 2px dashed red;
}

        
        
          
        
      

Прослеживается сходство со свойством border. Действительно, межколоночная линия описывается так же, как и рамка.

Пример

Скопировано

В примере ниже вы можете поменять внешний вид у линии между колонками. По умолчанию заданы такие стили:

        
          
          .text-wrapper {  column-count: 3;  column-rule: 3px solid red;  column-gap: 25px;}
          .text-wrapper {
  column-count: 3;
  column-rule: 3px solid red;
  column-gap: 25px;
}

        
        
          
        
      
Открыть демо в новой вкладке