CSS свойство column-span

Свойство column-span определяет, должен ли элемент занять одну колонку или все колонки. Имеет две значения - none и all. "None" - значение по умолчанию. При этом значении элемент занимает одну колонку. При значении "all" элемент занимает все колонки.

Свойство column-span может применяться для изображений. Но изображение не может занять несколько колонок. Поэтому следует выбрать, должно ли изображение растягиваться на все колонки или же совсем не растягиваться.

Элемент может растягиваться на колонки, если только это элемент блочного уровня.
Значение по умолчанию none
Применяется К in-flow элементам блочного уровня
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.columnSpan = "all";

Синтаксис

column-span: none | all | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      -webkit-column-count: 4; /* Chrome, Safari, Opera */
      -moz-column-count: 4; /* Firefox */
      column-count: 4;
      }
      h2 {
      -webkit-column-span: none; /* Chrome, Safari, Opera */
      column-span: none;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum - это текст-"рыба".</h2>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Пример, где заголовок занимает четыре колонки:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      -webkit-column-count: 4; /* Chrome, Safari, Opera */
      -moz-column-count: 4; /* Firefox */
      column-count: 4;
      }
      h2 {
      -webkit-column-span: all; /* Chrome, Safari, Opera */
      column-span: all;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum - это текст-"рыба"</h2>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Значения

Значение Описание
none Значение по умолчанию. Элемент не занимает все колонки, а только один из них.
all Элемент занимает все колонки.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
50.0
-webkit-
12.0
-webkit-
65.0+ 3.0
-webkit-
11.1
+ 15.0 -webkit-

Практикуйте свои знания

Как используется свойство CSS `column-span`?
Считаете ли это полезным?