Адаптивный текст в несколько колонок на CSS

С развитием технологий, мониторы становятся всё шире и шире, а вместе с ними и блоки текста на сайтах. Известно, что человеку наиболее комфортно читать около 67-75 символов в строке, но некоторое время браузеры не позволяли реализовывать верстку в несколько колонок с помощью встроенного функционала. Благо технологии не стоят на месте и всё больше браузеров внедряют поддержу многоколоночного текста, о которой и пойдет речь в этой статье.

Кроссбраузерность

На данный момент описываемый далее метод поддерживается во всех популярнейших браузерах (включая IE 10+).

multicolumn-browser-supportПодробнее

Демонстрацию данного способа можно встретить в тексте этой статьи.
(Если ваш браузер не поддерживает многоколоночный текст, то пожалуйста, обновите его в конце концов 🙂 И выглядеть это будет примерно так, как на картинке ниже).

multicolumn-text

Реализация

.three {
       column-count: 2;
       column-gap: 20px;
       column-rule: 1px dotted #ccc;
       -moz-column-count: 2;
       -moz-column-gap: 20px;
       -moz-column-rule: 1px dotted #ccc;  
       -webkit-column-count: 2;
       -webkit-column-gap: 20px;
       -webkit-column-rule: 1px dotted #ccc;
       text-align:justify;
}

Как вы уже догадались, свойство column-count определяет количество столбцов, а column-gap — расстояние между столбцами. Также существуют дополнительные свойства: column-width, позволяющее строго задавать ширину столбцов, и column-rule, определяющее разделитель между столбцами (например, 1px dotted #ccc, чтобы разделить столбцы точечной линией). Кроме того, можно использовать префиксы -webkit- и -moz- для поддержки более старых версий браузеров. Таким образом, можно управлять столбцами, просто изменяя числовые значения свойств.

Адаптивный многоколоночный текст

А что делать, если у нашего сайта «резиновая» верстка и его ширина может варьироваться, например от 320px до 1200px? В данном случае нам на помощь приходит такая фишка CSS, как media queries (позволяющие изменять css-свойства различных объектов в зависимости от ширины экрана пользователя).

Добавим после представленного выше класса следующий фрагмент:

@media screen and (min-width: 1024px) {
.three {
       column-count: 3;
       -moz-column-count: 3;
       -webkit-column-count: 3;
}

Этот фрагмент работает следующим образом: если ширина экрана больше или равна 1024px, то применить свойства, содержащиеся в данном блоке. В нашем случае мы перезаписываем некоторые свойства класса .three число колонок с двух увеличится до трёх. Хорошо, большие мониторы мы учли, осталось позаботиться о мобильных девайсах — там вообще не нужны колонки, поэтому пойдем еще дальше и добавим такой кусок кода:

@media screen and (max-width: 480px) {
.three {
       column-count: 1;
       -moz-column-count: 1;
       -webkit-column-count: 1;
}

Этот кусок кода сработает при ширине экрана 480px и менее и отобразит весь текст в одну колонку.

Таким образом, мы имеем следующую схему:

  • Ширина экрана <= 480px — одна колонка текста.
  • Ширина экрана от 480px до 1024px — две колонки
  • Ширина экрана >= 1024px — три колонки.

Демонстрацию того, что мы только что сделали, можно посмотреть здесь. Или можете скачать исходники.

На этом всё. Подписывайтесь, чтобы не пропустить новые статьи, а свои вопросы задавайте в комментариях.