<span><strong>Звичайний багатоколонковий текст. Всі властивості мають значення за замовчуванням.</strong></span>
<div class="multicol">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, sint dolores dolore tempora officiis quas blanditiis odit corporis tempore aperiam possimus voluptatum animi in dolor quae molestias laborum fugit. Quis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, obcaecati. Deleniti nesciunt enim molestiae suscipit ut nihil obcaecati voluptas molestias.</p>
</div>
<span><strong>А тут ми встановили для властивості <code>widows</code> значення 4. Тобто наступний фрагмент мусить містити мінімум 4 рядки тексту.</strong></span>
<div class="multicol rule">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam deleniti natus adipisci aspernatur, numquam cupiditate, vitae eveniet est eaque eos assumenda esse similique. Iste sequi ipsa maxime ad dolor amet! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi consequatur fuga a expedita, consectetur dolore placeat perspiciatis eius quod incidunt.</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 {
  widows: 4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.