В статье дано определение многоколоночному тексту, указаны преимущества такого форматирования контента на странице. Также здесь вы найдете свойства CSS, которые отвечают за многоколоночный текст.

Зачем это нужно?

Такое представление текста довольно часто встречается в газетах и журналах. Такой формат выбирают не просто так, при определенной ширине колонки устанавливаются наиболее комфортабельные условия для чтения. Однако не всегда на веб-сайтах нужно использовать многоколоночное представления текста. Так как окно обзора ограничено, то при наличии большого объема текста будет появляться скролл и в тот момент, когда первая колонка будет прочитана, нужно будет опять пролистывать страницу. Это не нравится пользователям и не является удобным процессом. Однако в тоже время такой прием позволит полностью забить пробелы на странице.

CSS-свойства для многоколоночного текста

Для таблицы стилей было разработано 4 разных свойства, которые отвечают за установку основных параметров многоколоночного текста:

• column-count — фиксирует наиболее приемлемое количество колонок;
• column-gap — интервал между столбиками с текстом;
• column-width — оптимальная ширина колонки;
• column-rule — граница, по которой делятся области с колонками.

Ниже представлен рисунок, на котором показано, за что отвечает каждое свойство

Также следует уточнить, что в данном случае при определении ширины и количества колонок имеются ввиду не статические значения. Решающую роль здесь играет ширина окна и удобность восприятия информации. Если ширина окна будет неукоснительно уменьшаться, то в определенный момент останется только одна колонка. Точно так себя будет вести и ширина этой колонки. Браузеру дозволено пренебречь установленной шириной для сохранения представления для наиболее удобного чтения.

Стоит обратить внимание на то, что для нормальной работы в некоторых браузерах стоит прописывать определенные префиксы. Таким образом, для работы свойства в Firefox указываем -moz, а для работы в Chrome и Safari - -webkit.

Ниже представлен пример кода для формирования многоколоночного текста

CSS

.text {
  	-webkit-columns: 200px 3;
  	-moz-columns: 200px 3;
 	 columns: 200px 3;
  	-webkit-column-gap: 30px;
 	 -moz-column-gap: 30px;
 	 column-gap: 30px;
  	-webkit-column-rule: 1px solid #ccc;
  	-moz-column-rule: 1px solid #ccc;
  	column-rule: 1px solid #ccc;
}

Ниже представлена картинка, как будет код выводится в браузере. Обращаю Ваше внимание на то, что выводится 2 колонки, хотя в коде указано 3. Это как раз и происходит из-за того, что при такой ширине окна такое количество колонок сохраняет удобство чтения.