Текст в несколько колонок средствами CSS3

Честно скажу, я очень завидую веб-разработчикам недалёкого будущего, которые будут верстать сайты для новых, современных браузеров с полной поддержкой HTML5 и CSS3. Какой красивый и компактный код можно будет писать, сколько возможностей будет у веб-дизайнеров! И как ограничены сегодняшние возможности верстальщика…

К примеру, чтобы текст отображался двумя колонками, сегодня веб-разработчику необходимо создать два параграфа и задать обтекание для одного из них. А можно даже прибегнуть к табличной вёрстке, как например на этом сайте. Проблемы негибкости и несовершенства такого метода видны невооружённым глазом: высота таких блоков может быть отрегулирована только вручную. Как же сделать, чтобы при наполнении текстом обе колонки параграфа выглядели одинаковыми по высоте?

В CSS3 есть свойства, позволяющие разбивать единый текстовой блок на равные колонки. Ширину таких колонок можно указать явно, используя свойство column-width или же браузер сам может её рассчитать, разработчику нужно только указать количество колонок через свойство column-count. Хотя ничто не мешает вам (вернее, не помешает в будущем) одновременно указать и ширину и количество колонок, используя свойство columns и указав значения через пробел.

К сожалению, на данный момент все эти свойства поддерживаются только Safari, Google Chrome и частично Mozilla Firefox (речь идёт о самых последних версиях браузеров), поэтому мы будем указывать -moz- и -webkit- префикс. Приведу несколько примеров.

Текст разбит на 3 колонки, ширина которых расчитана браузером и изменяется в зависимости от ширины внешнего блока:

p{  
 
-moz-column-count: 3;  
 
-webkit-column-count:3;  
 
}

Текст разбит на колонки фиксированной ширины, указываемой в пикселях, em или pt, но не в процентах. Количество колонок задаётся браузером и изменяется в зависимости от ширины внешнего блока:

p{  
 
-moz-column-width: 300px;  
 
-webkit-column-width:300px;  
 
}

Количество колонок и их ширина заданы явным образом, если ширина блока меньше общей ширины колонок, количество колонок задаётся браузером:

p{  
 
-webkit-columns: 3 300px;  
 
}

Чтобы колонки не сливались, расстояние между ними можно задать свойством column-gap:

p{  
 
-moz-column-count: 3;  
 
-webkit-column-count:3;  
 
-moz-column-gap:100px;  
 
-webkit-column-gap:100px;  
 
}

Между колонками можно дополнительно отрисовать линию rule, визуально разграничивающую колонки (что-то вроде border). Само собой можно указать ширину, цвет и стиль линии. Поддерживается только Chrome и Safari:

p{  
 
-webkit-column-count:3;  
 
-webkit-column-gap:100px;  
 
-webkit-column-rule:3px dotted red;  
 
}

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

В демке я объединил свойство column-count с возможностью современных браузеров изменять стили в зависимости от ширины браузера. Таким образом пользователи, у которых ширина браузера меньше 1000 пикселей увидят одну колонку, те у кого больше — две, ну и обладатели широких мониторов (с разрешением более 1400 пикселей) все три. Напомню, пример работает только в Firefox, Safari и Google Chrome.

ДЕМО