<span><strong>Звичайний багатоколонковий текст. Всі властивості мають значення за замовчуванням.</strong></span>
<div class="multicol">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem non magnam, quo quae doloremque natus neque aspernatur ipsum maiores nihil eveniet consequuntur aut repellendus, maxime cumque qui. Odit, praesentium qui.</p>
</div>
<span><strong>А тут ми встановили для властивості <code>orphans</code> значення 4. Тобто наступний фрагмент мусить містити мінімум 4 рядки тексту.</strong></span>
<div class="multicol rule">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis repellendus inventore modi, ad adipisci nobis nulla accusamus consequuntur beatae necessitatibus tempora recusandae consectetur exercitationem vero et ipsam commodi optio dolore! Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis labore magnam reprehenderit quidem itaque incidunt velit alias, repellendus aliquid enim!</p>
</div>
body {
  font-family: sans-serif;
  line-height: 1.45;
}

p {
  margin-top: 0;
}

.multicol {
  margin-top: 20px;
  padding: 10px;
  columns: 2;
  background: gold;
  margin-bottom: 16px;
}

.multicol.rule {
  orphans: 4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.