CSS :: Свойство orphans

css-свойство orphans (от англ. orphan – висячая строка) используется для того, чтобы задать минимальное количество строк блочного элемента, которые должны остаться при печати документа на предыдущей странице в случае переноса части содержимого блочного элемента на следующую страницу из-за нехватки места на текущем листе бумаги. Свойство имеет эффект, только если текст расположен на двух и более страницах.

Браузер Firefox не поддерживает свойство orphans.

Характеристики

Значение по умолчанию: 2.
Применяется: к блочным элементам.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.orphans="value".

Синтаксис

orphans: <число>

Значения

В качестве значений свойство принимает только целые положительные числа, указывающие минимальное количество строк разрываемого блочного элемента, которые должны остаться внизу предыдущей распечатываемой веб-страницы (остальные разрешается переносить на следующую страницу). По умолчанию используется число 2. При этом, если, например, в абзаце содержится восемь строк, но только три из них помещаются на предыдущей странице, а значение свойства orphans требует наличия на предыдущей странице как минимум четырех строк, браузер при распечатке или предварительном просмотре перенесет все содержимое блочного элемента на следующую страницу.

Если значение свойства widows конфликтует со значением свойства orphans, браузеры оставляют на предыдущей странице количество строк, указанное в качестве значения свойства orphans, а остальные строки переносят на новую строку, чтобы максимально выполнить запросы свойства widows.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-break-3/#propdef-orphans

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/orphans

Примеры

CSS

htmlCodes

/* Определяем параметры печати документа */
@media print{
	p{
	orphans: 3;
	widows: 3;
	color: black;
	font-family: Times, "Times New Roman", serif;
	}
	
	/* Запрещаем разрывы страницы до, внутри и после 
	абзацев, у которых атрибут class="no_break"	 */
	p.no_break{
	page-break-before: avoid;
	page-break-after: avoid;
	page-break-inside: avoid;
	}
}

Пример №1