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

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

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

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

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

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

правити

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

Синтаксис

widows: <число>;

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

<число>

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

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

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

p {
    widows: 2;
}