Свойство CSS widows
Свойство CSS widows задаёт минимальное число строк, остающихся вверху страницы или колонки. Узнайте подробнее и попробуйте примеры.
Свойство CSS widows задаёт минимальное количество строк блочного контейнера, которые должны оставаться вверху страницы или колонки.
Вдова — это одиночная строка или слово, оказывающиеся в одиночестве в начале страницы или колонки.
Это свойство используется преимущественно в контексте страничных носителей, например в правилах @media print или @page.
Свойство widows связано со свойством orphans, которое задаёт минимальное количество строк, остающихся внизу предыдущей страницы или колонки. Иными словами, строки, оставшиеся в конце предыдущей страницы, называются «сиротами» (orphans), а строки в начале новой страницы — «вдовами» (widows).
Зачем использовать свойство widows
Когда абзац разбивается на две страницы или две колонки, разрыв может оставить всего одну строку в начале следующей страницы. Такая изолированная строка плохо читается и выглядит неаккуратно в печатных документах и многоколоночных макетах.
Свойство widows позволяет задать минимальное количество строк, которые браузер обязан удержать вместе в начале новой страницы или колонки. Если соблюдение разрыва оставило бы меньше строк, чем разрешено, браузер переносит дополнительные строки вперёд, чтобы достичь порогового значения. Например, widows: 3 гарантирует, что не менее трёх строк абзаца перейдут вместе на следующую страницу.
Используйте widows вместе со свойством orphans, чтобы управлять обоими краями разрыва: orphans защищает низ уходящей страницы, widows — верх приходящей.
Отрицательные значения недопустимы. Значение должно быть положительным целым числом.
| Начальное значение | 2 |
|---|---|
| Применяется к | Блочным контейнерам. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS2 |
| DOM-синтаксис | object.style.widows = "3"; |
Синтаксис
Значения CSS widows
widows: <integer> | initial | inherit;Пример использования свойства widows:
Пример кода CSS widows
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eee;
color: #000;
font-size: 1em;
font-family: Roboto, Helvetica, sans-serif;
}
hr {
margin: 50px 0;
}
.example {
margin: 30px auto;
width: 800px;
}
@media print {
.text {
padding: 20px;
background-color: #fff;
columns: 10em 3;
column-gap: 2em;
text-align: justify;
}
.text p {
widows: 2;
}
}
</style>
</head>
<body>
<h2>Widows property example</h2>
<div class="example">
<div class="text">
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</body>
</html>Свойство widows действует только в фрагментированных контекстах — на страничных носителях (печать, @page) или в многоколоночных CSS-макетах. На обычной непрерывно прокручиваемой веб-странице разрывов страниц или колонок нет, поэтому свойству не на что воздействовать. Приведённый выше пример использует @media print для демонстрации: откройте предварительный просмотр печати в браузере, чтобы увидеть эффект.
Когда свойство применяется, а когда нет
Чтобы widows возымело эффект, необходимо выполнение трёх условий:
- Содержимое разбивается на фрагменты — либо печатные страницы, либо блоки многоколоночного макета.
- Свойство задано на блочном контейнере (например,
<p>или<div>), а не на строчном тексте. - Разрыв происходит внутри затронутого блока. Используйте page-break-inside (или
break-inside: avoid), если нужно полностью запретить разбивку блока.
Поддержка widows в браузерах неравномерна за пределами печати. Движки печати (генерация PDF, предварительный просмотр) широко поддерживают его, тогда как поддержка в экранных многоколоночных макетах варьируется между браузерами — воспринимайте это как прогрессивное улучшение, а не гарантию.
Значения
| Значение | Описание |
|---|---|
<integer> | Задаёт минимальное количество строк, которые должны оставаться вверху страницы или колонки. Отрицательные значения недопустимы. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |