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	Значение элемента наследуется от родительского элемента.