orphans в CSS — мінімум рядків унизу сторінки при друку

HTML

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

CSS

.cols {
    columns: 2;
    height: 150px;
    column-fill: auto;
}

p {
    orphans: 3;
    widows: 3;
}

HTML

<p>Вибери потрібне значення для <code>orphans</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;
  orphans: 4;
}

JS

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

HTML

<p class="cap">1. Типове значення (orphans: 2) — абзац переїжджає цілком:</p>
<div class="mc">
    <p class="pre">рядок A1<br>рядок A2<br>рядок A3<br>рядок A4</p>
    <p class="hot">рядок B1<br>рядок B2<br>рядок B3</p>
</div>

<p class="cap">2. orphans: 1 — один рядок дозволено лишити внизу:</p>
<div class="mc">
    <p class="pre">рядок A1<br>рядок A2<br>рядок A3<br>рядок A4</p>
    <p class="hot one">рядок B1<br>рядок B2<br>рядок B3</p>
</div>

<p class="cap">3. orphans: 10 — місця бракує завжди, абзац їде далі:</p>
<div class="mc">
    <p class="pre">рядок A1<br>рядок A2</p>
    <p class="hot ten">рядок B1<br>рядок B2<br>рядок B3<br>рядок B4<br>рядок B5</p>
</div>

CSS

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

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

.mc p {
    margin: 0;
}

.pre {
    background: #eef1f5;
}

.hot {
    background: #c0392b;
    color: #fff;
}

.one {
    orphans: 1;
}

.ten {
    orphans: 10;
}

HTML

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

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 {
  orphans: 4;
}