widows в CSS — мінімум рядків угорі нової сторінки

HTML

<div>
    <p>Перший абзац заповнює колонки, щоб другому не вистачило місця рівно на межі.</p>
    <p>Другий абзац достатньо довгий, щоб розірватися між колонками: widows пильнує, аби на новій колонці не лишився один самотній рядок.</p>
</div>

CSS

div {
    columns: 3;
    height: 130px;
    column-fill: auto;
}

p {
    widows: 2;
}

HTML

<p>Вибери потрібне значення для <code>widows</code>:</p>

<p><strong>Зверніть увагу на те, що ця властивість підтримується далеко не всіма браузерами!</strong></p>

<input type="number" id="val" value="4" min="0">

<hr>

<div id="block">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

p {
  margin-top: 0;
}

#block {
  padding: 10px;
  columns: 2;
  background: gold;
  widows: 4;
}

JS

document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('widows', this.value));
}));

HTML

<p class="cap">widows: 1 — досить одного рядка вгорі другої колонки:</p>
<div class="mc w1">
    <p class="fill">філер один<br>філер два</p>
    <p class="hot">рядок A<br>рядок B<br>рядок C<br>рядок D</p>
</div>

<p class="cap">widows: 3 — угорі другої колонки мусить бути щонайменше три рядки:</p>
<div class="mc w3">
    <p class="fill">філер один<br>філер два</p>
    <p class="hot">рядок A<br>рядок B<br>рядок C<br>рядок D</p>
</div>

<p class="note">Якщо обидві добірки виглядають однаково — ви у Firefox.</p>

CSS

.cap {
    margin: 18px 0 6px;
    max-width: 620px;
    font: 600 .9em/1.45 system-ui, sans-serif;
    color: #5a6472;
}

.mc {
    column-count: 2;
    column-gap: 24px;
    column-fill: auto;
    column-rule: 1px dashed #b9c6d8;
    width: 420px;
    height: 100px;
    padding: 4px 6px;
    border: 1px solid #b9c6d8;
    font: 14px/20px system-ui, sans-serif;
}

.mc p {
    margin: 0;
}

.fill {
    color: #8a94a6;
}

.hot {
    background: #f2b134;
}

.w1 .hot {
    orphans: 1;
    widows: 1;
}

.w3 .hot {
    orphans: 1;
    widows: 3;
}

.note {
    margin: 14px 0 0;
    max-width: 620px;
    font: .85em/1.5 system-ui, sans-serif;
    color: #c0392b;
}

HTML

<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>

CSS

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;
}