Текст в декілька стовпців за допомогою css3

Напевно ви помічали що текст, який друкується в газетах, читати набагато легше, ніж той, який на всю ширину екрану. Тим більше якщо екран дюймів 17, а ще гірше якщо 19. Так ось кілька колонок можна зробити без використання декількох блоків div, а всього лише пару рядків CSS3.

Браузери, які підтримують дані властивості: Firefox 2+, Chrome 4+, Safari 3.1+ і Opera 11.1.

Приклад можна побачити тут:

Подивитися прімерСкачать

Створення декількох колонок

Для того щоб задати кілька колонок необхідно скористатися властивістю column-count:

Відео: Поділ тексту по стовпцях в Excel

Відео: Відео №85. Excel. Супер. Як розділити текст в осередку на стовпці

12345

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

Ширина колонки

Для того щоб задати кілька колонок необов`язково використовувати вищенаведене властивість. Це ж можна зробити за допомогою властивості column-width, яке задає ширину колонки:

Відео: Всі про таблиці в програмі Word

12345

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

Інтервал між колонками

Що стосується колонок, то присутнє таке властивість, за допомогою якого можна задати інтервал між колонками. це властивість column-gap:

Відео: як ... розділити текст на стовпці в Excel

12345

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

Лінії між колонками

І остання властивість, яке ми розглянемо, це властивість за допомогою якого можна задати кордони між колонками:

12345

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

висновок

Великі тексти дійсно легше читати в кілька колонок, як роблять всі журнали і газети. Приємно що з`явилася така можливість в CSS3, де можна зробити текст в декілька колонів без використання блоків div з обтіканням.

Успіхів!

джерело: https://hongkiat.com/blog/css3-multi-columns/