Как разбить текст на колонки в html и css: Разбивка текста на колонки с помощью CSS3 – Вёрстка: разбить текст на колонки

Содержание

Введение в CSS3 Multicolumn. Работаем с колонками / Microsoft corporate blog / Habr

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

Замечание
В случае Internet Explorer 10 это автоматически означает возможность использования CSS3 Multi-column при разработке приложений в стиле Metro для Windows 8 с использованием HTML/CSS/JS.

В рамках статьи я не буду использовать браузерные префиксы, чтобы на запутывать код, но при реальном использовании не забудьте добавить поддержку префиксов для Firefox, Safari и Chrome.

Сразу отмечу еще две немаловажные детали.
Во-первых, в большинстве случаев применение многоколоночной верстки для текста можно рассматривать как развитие отображения контента сайта по пути Progressive Enhancement, в рамках которого пользователи более современных сайтов будут получать больше плюшек:

Во-вторых, многоколоночное отображение хорошо сочетается с возможностями Media Queries (и идеями отзывчивого дизайна, Responsive Design), например, при разных размерах экрана можно форматировать текст в разное количество колонок:

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

В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это, используется во многих приложениях для Win8 — например, это хорошо видно по приложению USA Today):

В общем, колонки — это прекрасно, но не забывайте об удобстве пользователей. А теперь в бой!

Колонки


Итак, у нас есть текст (контент), который мы хотим разместить в несколько колонок. С чего начать?

Чтобы превратить такой элемент в многоколоночный нужно через стили в CSS выставить одно из свойств: column-width или column-count в значение, отличное от auto. Например,
чтобы разбить текст на две колонки, достаточно сделать так:

article {
    column-count: 2;
}

Все остальное сделает браузер:

Альтернативное свойство — column-width — позволяет задать оптимальную ширину колонок:

article {
    column-width: 150px;
}

При этом браузер сам разбивает контент на нужное количество колонок, чтобы заполнить внешний контейнер, подстраиваясь под указанную ширину колонок. Важный момент заключается в том, что

реальная ширина может отличаться от заданной в большую или меньшую сторону: на картинке выше серая полоска имеет как раз ширину в 150px — и, как видно, она меньше, чем реальная ширина колонки.

Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:

Например, если у вас контейнер шириной 100px и вы задали колонки шириной 45px, то браузер посчитает, что влезет только две колонки, а чтобы заполнить все место, увеличит размер каждой до 50px. (Здесь также учитывается отступ между колонками, о чем будет рассказано в следующем разделе.)

В определенном смысле, это можно рассматривать как альтернативу указанию с помощью Media Queries разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:

@media (min-width:400px) {
    article {
        column-count: 2;
    }
}
@media (min-width:600px) {
    article {
        column-count: 3;
    }
}
...

Я второй раз говорю про альтернативу — и вот почему.

count vs. width


Как уже должно быть понятно из описания выше, спецификация дает два способа для задания количества и ширины колонок (кстати, у всех колонок она одинаковая!):
  • column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
  • column-width заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение браузера.

В большинстве случаев вы будете использовать либо одно, либо другое, оперируя соответственно числами, либо длинами. Для упрощения записи есть такое короткое свойство columns, реагирующее на формат указываемых данных:
columns: 12em;      /* column-width: 12em; column-count: auto; */
columns: 2;         /* column-width: auto; column-count: 2; */
columns: auto;      /* column-width: auto; column-count: auto; */
columns: auto 12em; /* column-width: 12em; column-count: auto; */
columns: 2 auto;    /* column-width: auto; column-count: 2; */

Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае column-count определяет максимальное количество колонок:

article {
    columns: 150px 3;  /* column-width: 150px; column-count: 3; */          
}

В спецификации вы также найдете псевдо-код, описывающий алгоритм рассчета количества колонок и их ширины.

Отступы и разделительные линии


Теперь, когда мы научились создавать колонки, самое время научиться управлять тем, что происходит между ними: отступами и разделительными линиями.

Чтобы изменить отступ между колонками, определено свойство column-gap. Чтобы визуально обозначить раздел между колонками, введено еще одно свойство — column-rule-*:

column-gap


column-gap позволяет указать ширину пространства между колонками. Свойство принимает в качестве значения длину, либо определяемое браузером значение normal (спецификация рекомендует использовать 1em), являющееся также значением по умолчанию:
article {
    columns: 3;  
    column-gap: 3em;          
}

Важно учитывать, что размер отступа между колонками используется при расчете ширины колонок и их количества. Например, если указано только количество колонок (как в примере выше), то ширина рассчитывается так:

W = ((available-width + column-gap) / N) - column-gap;

column-rule


Если для обозначения колонок свободного пространства недостаточно, можно использовать свойства column-rule-*, добавляющие линию между колонками. По своему поведению и заданию аналогичные свойствам border-*:
  • column-rule-color — цвет линии,
  • column-rule-style — стиль линии,
  • column-rule-width — ширина линии.

Как и в случае с границами блоков, есть краткая форма записи — просто column-rule:
article {
    columns: 3;  
    column-rule: 3px dotted CornflowerBlue;         
}

Важный момент: разделительная линия отрисовывается ровно посередине отступа между колонками, при этом не занимая места. Если вдруг разделительная линия оказывается больше по ширине, она начинает пересекаться с контентом:

article {
    columns: 3;  
    column-rule: 5em groove SkyBlue;      
}

Причем отрисовывается разделитель сразу после фона (background) контейнера.

Разрывы


Распределение контента по колонкам — еще одна интересная задача, требующая иногда тонкого управления. По умолчанию, контент — это сплошная «масса», весьма прямолинейным образом, перетекающая из одной колонки в другую. Но что делать, если, скажем, я хочу быть уверенным, что в конце колонки у меня не повиснет одинокий заголовок? Или если мое визуально-эстетическое чувство требует, чтобы цитата не разрывалась на несколько колонок или даже больше: единолично занимала целиком всю колонку?

Для решения всех этих задач есть специальные свойства. Знакомьтесь:

  • break-before — что должно происходить перед блоком контента,
  • break-after — что должно происходить после блока контента,
  • break-inside — что должно происходить внутри блока контента.

Если вы знакомы с аналогичными свойствами, отвечающими за разбивку контента на страницы (page-break-*), то данные свойства для колонок ведут себя схожим образом: используют те же значения плюс несколько дополнительных (отмечены курсивом):
  • break-before: auto, always, avoid, left, right, page, column, avoid-page, avoid-column
  • break-after
    : auto, always, avoid, left, right, page, column, avoid-page, avoid-column
  • break-inside: auto, avoid, avoid-page, avoid-column

Думаю, из названий значений, в основном, должен быть понятен смысл действий. Например, чтобы в описанном выше предположении избежать появления разрывов внутри диалога и одновременно выделить его в отдельную колонку, мне достаточно указать:
article dialog {
    break-inside:avoid;
    break-before: column;
    break-after: column;
    display:block;
}

Важный момент: на сегодня управление разрывами в колонках поддерживается только в Opera 11.10+, — что не удивительно, учитывая, что редактор спецификации Хокон Виум Ли, — и IE10.

Мои эксперименты со свежей версией Оперы и предварительной публичной версией IE10 показывают, что местами имеющиеся реализации отличаются друг от друга. Однако тут я затрудняюсь ответить, какой браузер ведет себя «правильней», так как спецификация хотя и содержит отдельный раздел, посвященный переполнению (overflow), все же оставляет некоторые нюансы на усмотрение браузера (например, позволяет появление дополнительных экстра-колонок при явном указании разрывов).

Растягивание на несколько колонок


Теперь, когда мы научились создавать колонки и немного управлять поведением контента, давайте научимся еще одному трюку — растягиванию контента на несколько колонок. Для этого есть специальное свойство: column-span, принимающее значения none и all.

Нас интересует второе значение. Оно выдергивает блок контента из общего многоколоночного потока и растягивает его на все колонки. При этом контент до этого элемента и контент после автоматически балансируются на все имеющиеся колонки.

article dialog.big {
    column-span:all;
    display:block;
    font-size:1.3em;
    margin:20px 0;
}

В данном случае написанная крупным фраза из диалога растянута на все колонки. Обратите внимание на порядок следования текста: верхняя левая колонка, верхняя правая, фраза диалога, нижняя левая и далее нижняя правая.

Кстати, важный нюанс: если высота колонок ограничена, и дополнительного места под растягивание элементов нет, браузер может вполне легально игнорировать требование растягивания.

Растягивание элементов на сегодня все еще

не поддерживается в Firefox.

Заполнение


И последняя деталь, которой вы, наверняка, уже должны были озадачиться: а как, собственно говоря, браузер решает, как ему заполнять колонки?

Для ответа на этот вопрос спецификация вводит свойство column-fill. Заполнять можно сбалансированно (balance), — именно так делается по умолчанию, — стараясь выдержать одинаковую высоту колонок; либо автоматически (auto), заполняя колонки последовательно.

Сравните, вот так браузер балансирует по умолчанию:

article  {
    columns: 2;
    /*column-fill:balance;*/
    height: 250px;
}

А вот так в автоматическом последовательном режиме:

article  {
    columns: 2;
    column-fill:auto;
    height: 250px;
}

Управление заполнением на сегодня поддерживают только Internet Explorer и Opera.

Итоги


Прежде всего, продолжение повести А.П. Чехова «За яблочки» можно
найти в Викитеке.

По существу дела, следя за развитием веб-стандартов, в том числе по некоторым моим статьям про CSS3 (см. например, статью про CSS3 Grid Layout), я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможностями. Адаптивные, гибкие и мощные средства для управления размещением контента все ближе и доступнее. А решение сложных задач — все проще.

Интерактив


Поиграться с работой CSS3 Multi-column можно на ietestdrive.com:

Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандарт) браузеров — например, можно использовать плагин для jQuery Columnizer. Помните об адаптивности и зрителях маленьких и больших экранов.

Верстка текста в две колонки на чистом CSS / Habr

Данный пост навеян моим же предыдущим топиком, в котором монолитный текст делился на две колонки при помощи JS. В комментах прозвучала фраза типа «С JS и дурак сделает, вот бы на чистом CSS».
Алгоритм не изменен, суть остается та же. Практической пользы от топика — 0, вряд ли такой метод будет применяться в реальных проектах. Just for fun, как говорится.
Смотрим что получилось
Под катом код...
<div'>
<div'>
<div'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
<span'>
</span'>
</div'>
<span'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
</span'>
</div'>
</div'>

И собственно CSS:

#News {
position : relative;
overflow : hidden;
top : 33%;
}

#News P{
margin : 0px;
}

#Col1 {
width : 260px;
margin-right : 40px;
text-align : justify;
float : left;
}

#Col1 span.Zagl1 {
display : block;
width : 260px;
height : 1000px;
position : absolute;
top : 50%;
background : #f00;
}

#News span.Col2 {
width : 260px;
text-align : justify;
position : absolute;
top : -50%;
left : 50%;
float : left;
}

Многоколоночный текст (column-count)

Вы здесь: Главная - CSS - CSS3 - Многоколоночный текст (column-count)

Многоколоночный текст (column-count)

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

Когда же удобно использовать многоколоночный текст?

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

Хотите узнать как разбить текст на колонки не используя флоаты, инлайн-блоки и флексы? Делается это на удивление легко, с помощью свойства и числа: column-count: 3;

Просто задаем любому блочному элементу (p, div) с текстом - класс с заданным числом колонок. В результате текст автоматически распределяется по колонкам по мере изменения ширины экрана.

Многоколоночный текст (column-count)

В HTML коде вы видите один параграф текста:

<p>
    текст текст текст
</p>

В CSS коде прописываем количество колонок:

.col-count {
    column-count: 3;
}

Адаптивность многоколоночного текста с медиа запросом

При уменьшении ширины экрана, колонки с текстом будут вытягиваться по вертикали, при этом не меняя количества колонок. На маленьких разрешениях экрана, при максимальной ширине в 500 пикселей следует оставить только одну колонку, достаточно прописать медиа запрос, указав для column-count: auto; или column-count: 1;

@media (max-width: 500px) {
   .col-count {
      column-count: auto;
   }
}

Адаптивность многоколоночного текста без медиа запроса

Для многоколоночного текста не обязательно указывать количество колонок, если это не принципиальный вопрос, достаточно указать ширину одной колонки и браузер сам решит на каком разрешении сколько делать колонок. При таком подходе, не придется отдельно работать над адаптивностью.

column-width: 250px;

Дополнительные свойства для форматирования текста в колонках

Расстояние между колонками задаётся свойством column-gap в px или em.

Многоколоночный текст (column-count) column-gap: 30px;

Разделительная линия между колонками задаётся с помощью свойства column-rule, по своему поведению похожие на свойства border.

Многоколоночный текст (column-count) column-rule: 2px solid #000;

Используем HTML5 тег article

Уместным для разметки текста в колонках будет использование тега article вместо классов и идентификаторов

<article>
    текст текст текст
</article>

article {
    column-count: 3;
    column-gap: 30px;
    column-rule: 2px solid #000;
    margin: 0 40px;
}

Поддержка браузерами на 92%

Почти все современные браузеры поддерживает вышеперечисленные свойства без указания префиксов. В крайнем случае, если не будет поддержки, текст просто выведется в одном блоке, обычным образом.

Демонстрация HTML страницы: демо

  • Многоколоночный текст (column-count) Создано 19.04.2018 10:22:00
  • Многоколоночный текст (column-count) Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Создаем колонки с помощью CSS

На одном сайте, который я поддерживаю, в сайдбаре выводится список ссылок на месячные архивы записей. Так вот, он сильно вырос за несколько лет и я решил выводить его более компактно в 2 колонки.

Для решения такого вопроса можно использовать разные подходы. Я остановился на использовании свойств многоколоночности в CSS3.

создание нескольких колонок на CSS

Чаще всего многоколоночность используется для вывода текста в газетах и журналах. Более узкие колонки легче вопринимаются зрением. Раньше отобразить контент таким образом было довольно сложным, и обычно для этого использовалось разделение текста на несколько div’ов. Но все стало намного проще с CSS3 Multi Column Module.

Официальная спецификация, Поддержка браузерами.

Создание контента, разбитого на несколько колонок

В примере на картинке ниже текст заключен в HTML5-тег article, к которому применены стили, разбивающие содержимое на 2 столбца:

article { -webkit-column-count:2; -moz-column-count:2; column-count:2; }

article {

-webkit-column-count:2;

-moz-column-count:2;

column-count:2;

}

создание нескольких колонок на CSS

При помощи свойства column-width можно задать колонкам необходимую ширину:

article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; }

article {

-moz-column-width: 150px;

-webkit-column-width: 150px;

column-width: 150px;

}

создание нескольких колонок на CSS

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

Интервал задается свойством column-gap в px или em, и не может быть отрицательным:

article { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }

article {

-webkit-column-gap: 30px;

-moz-column-gap: 30px;

column-gap: 30px;

}

создание нескольких колонок на CSS

Разделитель колонок

Свойство column-rule позволяет добавлять разделитель между столбцами, принцип работы схож с border.

article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; }

article {

-moz-column-rule: 1px dotted #ccc;

-webkit-column-rule: 1px dotted #ccc;

column-rule: 1px dotted #ccc;

}

создание нескольких колонок на CSS

Объединение колонок

Свойство column-span работает аналогично с colspan в table, объединяя нужные столбцы. На картинке ниже заголовок h2 занимает пространство всех 3-х столбцов.

article h2 { -webkit-column-span: all; column-span:all; }

article h2 {

-webkit-column-span: all;

column-span:all;

}

создание нескольких колонок на CSS

Итог

Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Вы можете применять это свойство к любым элементам: div, list и т.п., разбивая таким образом списки или вывод записей.

Список поддерживаемых браузеров достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную javascript-библиотеку.

примеры с текстом и изображением — Примеры

Рассмотрим как сделать CSS колонки (w3.org). Пару ссылок о поддержке браузерами:
-moz- для Firefox, -webkit- для Chrome и Safari, Опера и IE10 без префиксов. Не все свойства поддерживаются, поэтому я их буду опускать. Содержание будет перетекать из одного столбца в другой, при этом высота блока будет автоматически сбалансирована.

columns: ширина количество; 

columns: column-width column-count;
Пример:
<p>содержимое</p>

или

<p>содержимое</p>
Удобно применение @media, которое установит для разрешения экрана до 400 пикселей только одну колонку:
<style type="text/css">
.kolonka {
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
}

@media (max-width: 400px) {
.kolonka {
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  }
}
</style>

<p>содержимое</p>

Нельзя отдельно для каждого столбца задать ширину колонки (column-width), при расчёте её значения нужно учитывать наличие межколоночного интервала (column-gap), поэтому уместнее, если она будет измеряться автоматически.

Для наглядности между колонками можно указать разделитель, синтаксис которого аналогичен border css.

column-rule: толщина стиль цвет;

column-rule: column-rule-width column-rule-style column-rule-color;
<style type="text/css">
.kolonka {
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
  column-rule: 1px dotted red;
  -moz-column-rule: 1px dotted red;
  -webkit-column-rule: 1px dotted red;
}
</style>

<div>содержимое</div>

Ширина межколоночного интервала (column-gap) по умолчанию равна normal или 1em.

<style type="text/css">
.kolonka {
  line-height: 0;
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
  column-gap: 0;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
}

.kolonka img{
  width: 100% !important;
  height: auto !important;
  padding: 0px;
}
</style>

<div>
  <img src="URL_изо_1"/>
  .......
  <img src="URL_изо_15"/>
</div>

В качестве ещё одного образца можно посмотреть на оглавление shpargalkablog.ru, реализация которого описана на этой странице. Для таких тематик, как кулинария будет весьма кстати.

Доп. тему http://shpargalkablog.ru/2013/09/div-gleich-height.html

Текст в несколько столбцов с помощью CSS3

Лого SiteHere.ru