Войти
s-lub » Учебники » CSS 3 » Разбивание текста на столбцы

Разбивание текста на столбцы

Разбивание текста на столбцы

С помощью CSS3 свойства column-count стало возможным указать количество столбцов, на которые необходимо разбить текст выбранного элемента.

Важно: данные свойства поддерживаются в браузерах IE10+ и Opera. Для браузеров Chrome и Safari перед свойством требуется добавить префикс -webkit, а для Firefox префикс -moz.

Пример разделение текста на три равных столбца:

<html>
<style type='text/css'>
h1 {
border-bottom:1px solid;
}
div {
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
}
</style>
<body>
<h1>Пример</h1>
<div>Сегодня в Кировске прошли заключительные всероссийские соревнования среди лыжников-гонщиков спортивного сезона 2017/2018 годов. Спортсмены состязались в масс-старте на 10 и 15 км свободным стилем.
К сожалению, не смотря на статус соревнований и приличные призовые, на старт гонок вышло всего 40 спортсменов, 31 из которых представляли Мурманскую область, но не смотря на это гонки получились очень зрелищными до последних метров дистанций.
Победу среди женщин одержала Мария Давыденкова (Республика Татарстан) 27.50.0, второе место у Анны Белой (Мурманская область) +1 секунда, третье место у Ларисы Рясиной (Санкт-Петербург) +1.4 секунды.</div>
</body>
</html>

column-gap

С помощью свойства column-gap можно указать величину отступа между столбцами, значение указывается в пикселях.

Пример:

<html>
<style type='text/css'>
h1 {
border-bottom:1px solid;
}
div {
column-count:4;
-moz-column-count:4;
-webkit-column-count:4;
column-gap:50px;
-moz-column-gap:50px;
-webkit-column-gap:50px;
}
</style>
<body>
<h1>Пример</h1>
<div>Сегодня в Кировске прошли заключительные всероссийские соревнования среди лыжников-гонщиков спортивного сезона 2017/2018 годов. Спортсмены состязались в масс-старте на 10 и 15 км свободным стилем.
К сожалению, не смотря на статус соревнований и приличные призовые, на старт гонок вышло всего 40 спортсменов, 31 из которых представляли Мурманскую область, но не смотря на это гонки получились очень зрелищными до последних метров дистанций.
Победу среди женщин одержала Мария Давыденкова (Республика Татарстан) 27.50.0, второе место у Анны Белой (Мурманская область) +1 секунда, третье место у Ларисы Рясиной (Санкт-Петербург) +1.4 секунды.</div>
</body>
</html>

column-rule

С помощью свойства column-rule Вы можете задать ширину, цвет и стиль оформления пространства между столбцами, на примере мы установили точечные линии:

<html>
<style type='text/css'>
h1 {
border-bottom:1px #7F0055 solid;
}
div {
column-count:4;
-moz-column-count:4;
-webkit-column-count:4;
column-rule:2px dotted #7F0055;
-moz-column-rule:2px dotted #7F0055;
-webkit-column-rule:2px dotted #7F0055;
}
</style>
<body>
<h1>Пример</h1>
<div>Сегодня в Кировске прошли заключительные всероссийские соревнования среди лыжников-гонщиков спортивного сезона 2017/2018 годов. Спортсмены состязались в масс-старте на 10 и 15 км свободным стилем.

К сожалению, не смотря на статус соревнований и приличные призовые, на старт гонок вышло всего 40 спортсменов, 31 из которых представляли Мурманскую область, но не смотря на это гонки получились очень зрелищными до последних метров дистанций.

Победу среди женщин одержала Мария Давыденкова (Республика Татарстан) 27.50.0, второе место у Анны Белой (Мурманская область) +1 секунда, третье место у Ларисы Рясиной (Санкт-Петербург) +1.4 секунды.</div>
</body>
</html>

column-width

CSS3 свойство column-width позволяет указывать ширину столбцов текста.

Пример:

<html>
<style type='text/css'>
h1 {
border-bottom:1px #7F0055 solid;
}
div {
column-width:150px;
-moz-column-width:150px;
-webkit-column-width:150px;
}
</style>
<body>
<h1>Пример</h1>
<div>Сегодня в Кировске прошли заключительные всероссийские соревнования среди лыжников-гонщиков спортивного сезона 2017/2018 годов. Спортсмены состязались в масс-старте на 10 и 15 км свободным стилем.

К сожалению, не смотря на статус соревнований и приличные призовые, на старт гонок вышло всего 40 спортсменов, 31 из которых представляли Мурманскую область, но не смотря на это гонки получились очень зрелищными до последних метров дистанций.

Победу среди женщин одержала Мария Давыденкова (Республика Татарстан) 27.50.0, второе место у Анны Белой (Мурманская область) +1 секунда, третье место у Ларисы Рясиной (Санкт-Петербург) +1.4 секунды.</div>
</body>
</html>


- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение