Многоколоночный текст на CSS3

Задача

Нужно распределить текстовый контент в несколько столбцов. И мы хотим сделать это при помощи средств CSS.

Решение

CSS3 предлагает нам новый вариант организации текстового контента при помощи модуля Multi-column. Это дает возможность разбить на столбцы текст без дополнительной разметки вроде плавающего <div> или <table>.

Об истории и поддержке

Впервые модуль Multi-Column был опубликован еще 10 лет назад - в году, но только в апреле, с выпуском Firefox 1.5 беты (основанный на Gecko 1.8) появилась хотя бы частичная поддержка CSS3 Multi-Column.

Сегодня модуль Multi-column поддерживается в браузерах Mozilla, Webkit (Safari и Chrome) и Opera 11, соответственно в IE и ранних версиях Opera многоколоночность не сработает.

Справка от W3C:

… таблицы стилей могут указывать, что контент элемента должен быть размечен как многоколоночный.

Хорошо, как использовать эту функцию?

Для поддержки в браузерах Mozilla и Webkit нужно использовать вендорные префиксы -moz- и -webkit-.

Свойства CSS3-модуля

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

Так, хватит уже теории. Переходим к практике!

Есть два способа определения столбцов:

• column-count — сколько тебе нужно столбцов;
• column-width — какой ширины должен быть столбец.

Количество столбцов:

#multi-column1 {
 column-count: 3
 -moz-column-count: 3;
 -webkit-column-count: 3;
 сolumn-gap: 20px;
 -moz-column-gap: 20px;
 -webkit-column-gap: 20px;
 text-align: justify;
}

Ширина столбца:

#multi-column2
{
 column-width: 200px;
 -moz-column-width: 200px;
 -webkit-column-width: 200px;
 column-gap: 30px;
 -moz-column-gap: 30px;
 -webkit-column-gap: 30px;
 text-align: justify;
}

Или же, как альтернативный вариант, можно использовать короткое свойство columns.

Граница между столбцами

Если для определения столбцов ты выбираешь column-count или column-width, можно добавить между ними разграничитель при помощи следующего CSS:

 column-rule: 2px solid #9c9c9c;
 -moz-column-rule: 2px solid #9c9c9c;
 -webkit-column-rule: 2px solid #9c9c9c;

Если хочешь еще глубже разобраться в CSS3-модуле Multi-column — стоит почитать спецификацию W3C.

А как же браузеры, не понимающие Multi-column?

Специально для них очень давно был разработан скрипт css3-multi-column.js. Он парсит CSS-файл и с помощью javascript пререразбивает нужные блоки на несколько колонок.

Демо-пример — используем многоколоночный текст на CSS3 и скрипт для IE.

Проверено в:

• IE 7-8
• Opera 11
• Firefox 6
• Safari
• Chrome

Материал:

• Multi-column text using CSS3