В этом материале мы поговорим о том, как разбить текст на колонки с помощью CSS3 .
В этом материале мы поговорим о том, как разбить текст на колонки с помощью CSS3.
Раньше, чтобы разбить текст на колонки, нам нужно было использовать float. Теперь же для этого есть отдельное свойство. Чтобы было понятнее, создадим небольшую html разметку.
<html>
<head>
<title>Multi-columns in CSS3</title>
<meta charset="utf-8">
</head>
<body>
<div class="block">
<h2>Заголовок H2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis alias architecto nulla facilis! Recusandae, sunt, impedit quidem perferendis iste fugit inventore similique aut dolore magnam est quasi quas sit magni commodi reiciendis tempore laudantium blanditiis non at nostrum ut officia enim eum possimus officiis atque excepturi tenetur consequuntur aliquam! Eligendi?</p>
<h2>Заголовок H2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt, veritatis quas id voluptate eum corrupti saepe voluptas vel nostrum nulla velit maiores fuga molestiae nisi sit esse consectetur nesciunt assumenda minus labore temporibus laborum eius sint corporis. Consectetur, maiores est nisi debitis voluptatibus inventore unde magnam reiciendis placeat aut.</p>
<h2>Заголовок H2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt, veritatis quas id voluptate eum corrupti saepe voluptas vel nostrum nulla velit maiores fuga molestiae nisi sit esse consectetur nesciunt assumenda minus labore temporibus laborum eius sint corporis. Consectetur, maiores est nisi debitis voluptatibus inventore unde magnam reiciendis placeat aut.</p>
</div>
</body>
</html>
Итак, у нас есть текст. Чтобы разбить его на 3 колонки, нужно воспользоваться свойством column-count
.block {
column-count: 3;
}
Также, мы можем указать ширину колонок, тогда их количество будет вычисляться автоматически.
.block {
column-width: 200px;
}
При помощи свойства colump-gap можно изменять расстояние между колонками.
.block {
column-gap: 100px;
}
И, также, с помощью свойства column-rule мы можем ставить разделитель между колонками. Он задаётся так же, как и border.
column-rule: 2px dashed #ccc;
Если мы зададим нашему блоку высоту, то у нас появится горизонтальный скрол. Что логично :)
Вот и всё, что можно рассказать про это свойство. В конце стоит лишь добавить, что поддерживается оно плохо: Internet Explorer начиная с 10 версии, а android вообще не поддерживает. Так что, применяйте его только там, где текст и в одну колонку будет отображаться нормально.
