css властивість orphans

Властивість orphans визначає мінімальну кількість рядків у контейнері, які потрібно залишити у фрагменті перед перервою фрагментації (існує подібна властивість widows, котра діє майже так само, лише вказує кількість рядків, які потрібні залишити у фрагменті після перерви фрагментації).

Загальний термін для переносу вмісту в контейнерах - фрагментація. Сторінки, стовпці та регіони називаються контейнерами фрагментації. Їх також називають фрагментарними.

Кожна фрагментація перериває завершення макета фрагментованої коробки в поточному фрагментарному ланцюзі і призводить до того, що залишковий вміст буде розміщено у наступному фрагменті, у деяких випадках викликаючи створення нового фрагментарного матеріалу, який містить знову ж таки вкладений вміст.

Властивість orphans була спочатку введена у CSS2, щоб допомогти авторам контролювати розриви рядків у друкованих носіях. CSS3 розширює використання цієї властивості для вирішення інших типів функцій макета, таких як макети з декількома стовпцями та регіонами CSS (де вміст з одного або декількох елементів може розміщуватися на одному або декількох рядках).

правити

Нотатка

Якщо значення властивості конфліктує із властивістю widows, то widows має пріоритет і враховується замість orphans.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

orphans​: <число>;

Властивість orphans може отримувати єдине значення:

<число>

Kількість рядків тексту, які розміщується на наступній сторінці.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
orphans	25.0	Не підтримується	7.0	9.2	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
orphans	4.4	Не підтримується	7.1

Приклади

+ запропонувати свій приклад у пісочниці

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

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

p {
    orphans: 3;
    widows: 3;
}