orphans в CSS

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

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

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


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



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

What are the orphans and w > Ask Question

I have never seen before like the following (seen in bootstrap template):

So, what are the orphans and widows for?

3 Answers 3

In typography, a “widow” is the last line of a paragraph that appears at the start of a new page, and an “orphan” is the first line of a paragraph that appears at the end of a page. So both are single lines that have been isolated from the rest of the paragraph by a page break. They are regarded as avoidable, though opinions disagree on how serious the problems are.

The CSS concepts are generalizations of the typographic concepts, replacing “the last line” by “the last few lines” and “the first line” by “the first few lines”. These generalizations are not particularly useful; there is generally nothing wrong with having two (or three or. ) lines of a paragraph on a page other than the rest of the paragraph.

The definitions of the CSS properties are somewhat unnatural, since e.g. orphans: 4 does not mean four orphans anywhere. Instead, it says that less than 4 lines of a paragraph at the end of a page be considered an orphan and be avoided. It is rather difficult to find use for such a setting.

The initial value of both properties is 2, which thus means that the single line orphans and widows (i.e., orphans and widows in the typographic sense) are to be avoided.

Илон Маск рекомендует:  Что такое код globalpageunlock

So why would you set those properties? Normally only as orphans: 1 or widows: 1 or both, to specify that typographic orphans or widows need not be avoided. It’s difficult to find use cases even for these.

The example in the question thus means that a page break may not appear inside a p , h2 , or h3 element, unless at least 3 lines of it appear on each page. So a 5-line paragraph may not be broken across two pages at all, and 6-line paragraph may only be broken as 3 and 3 lines. This sounds pointlessly excessive. For headings, it should cause no harm, since a heading normally fits on one line – but the setting is pointless for headings, since even the defaults prevent a 2- or 3-line heading from being broken (and a heading longer than 3 lines is really anomalous).


Easily manage projects with monday.com

In typography terms, an orphan is the first line of a paragraph that is left behind on the old page while the paragraph continues on the next. The orphan property controls the minimum number of lines of a paragraph that can be left on the old page. This property only affects paged media such as print .

For example, if a paragraph can’t fit on one page in its entirety it is split wherever it is possible. In this way single lines of a paragraph can appear on page before it continues on the next page. This is usually unwanted, so many word processors require at least two lines to be left on an old page, instead of one. You can give it either a positive number (where 2 is the default) or inherit .

Note that the orphan property does not generally affect non-paged media such as screen . However, browsers supporting both orphans and columns will apply the intended functionality to columns as well. Also, the property only affects block-level elements.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53406c18af028df9 • Your IP : • Performance & security by Cloudflare

CSS 2.1 Reference: orphans Property

CSS orphans Property
  • value is specified by using an integer or the keyword inherit.

The orphans property is used with paged media. Paper, and discrete pages displayed on a computer screen, are both examples of paged media. This property specifies the element’s minimum number of lines to display at the bottom of a page. This prevents an element from being split between pages at an undesired position.

CSS3.com — A comprehensive CSS 3 reference guide, tutorial, and blog


This property specifies the minimum number of lines of content for the current element that must be left at the bottom of a page in a paged display environment.


test text in the paragraph

Possible Values

inherit: Explicitly sets the value of this property to that of the parent.
[integer]: Specifies an integer value representing the minimum number of lines of content that must be left at the bottom of a page.

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Печать : orphans

смотрим также
    Бальзамы из тайланда отзывы шоппинг в паттайе тайланде паттайя тайланд экскурсии отзывы.

Материал из Справочник Web-языков


Атрибут orphans | Свойство orphans

Задает минимальное число строк, которые могут присутствовать в нижней части страницы при печати.


Скрипты [ nLines = ] object.style.orphans[= nLines]

Используемые значения

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является . Атрибут Каскадных таблиц стилей (CSS) не наследуется.


Это свойство применяется только при печати документа.

Свойство orphans используется в связке со свойством widows. Причем, у свойства widows больший приоритет.

Данные свойства используются только совместно с элементами блокового уровня, например р или div.


В примере к странице добавляются по 3 строки снизу и сверху при печати.

CSS свойство orphans

Свойство orphans определяет минимальное количество строк блочного контейнера, которое должно быть оставлено в конце страницы или колонки.

Orphan — это первая строка параграфа, которая появляется в нижней части страницы, а параграф продолжается на следующей странице .

Значение по умолчанию 2
Применяется К элементам блочного контейнера.
Наследуется Нет
Анимируемое Нет
Версия CSS2
DOM синтаксис object.style.orphans = «2»;



В данном примере четыре строки, выделенные зеленым цветом оставлены в конце первой колонки.

CSS orphans

The orphans property specifies the minimum number of lines of an element that are displayed at the bottom of the first page when the element’s content cannot fit in the first page. This property only affects block-level elements. This is even applicable for columns, in addition to pages.

Consider a case where you have a long paragraph whose content is not able to fit in one page and so some of its content gets displayed on the first page and the rest on the second page. If just one line of the paragraph is visible on the first page, then it will not have a good visual impact on users. This left out line is called an orphan. In order to display more number of lines (orphans) of the paragraph on the old page, you need to give that number as value to the orphans property.

Before moving to its example, have a look at the values that this property can take.


: This number specifies the number of lines (orphans) that you want to be displayed on the old page. This value must be a positive integer.

initial : This is the default value which is 2.

inherit : The element inherits value from its parent element.

unset : This sets the inherited value if the element inherits from its parent, otherwise it sets its initial value.


Look at the following example in which changing the number of orphans changed the number of lines getting displayed in an older column.

In the above example, the content of the third paragraph of both the div got splitted into two parts. The first part (orphans) got displayed in the older column within the div and the other part got displayed in a new column. For the first div, the number of lines inside the div (orphans) are 4. On giving orphans: 5 to the second div, the number of lines of its third paragraph inside the div (orphans) became 5.

The orphans property does not affect non-paged media. There is a similar property widows which specifies the minimum number of lines which are displayed at the top of the new page when the content of an element splits and the rest of the content gets displayed on a new page.

Browser Support

This property is not supported by Firefox and some older Webkit-based browsers.

Печатаем web-документ правильно с помощью CSS

Кого-то это может удивить, но распечатывают web-страницы довольно часто.
В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.

Предварительные изменения в стилях

Желательно разбивать CSS-стили на отдельные файлы в зависимости от микроформатов:

Это поможет избежать путаницы в дальнейшем и сэкономит ваше время. Стоит учесть, что шрифты на печати следует задавать в пунктах (pt), дюймах (in), пиках (pc) или сантиметрах/миллиметрах(cm/mm).

Задаем цвет фона, выставляем отсупы

Убираем отступы, задаем для страницы белый цвет фона и черный шрифт (для контрастности), выставляем поля в 0,5дюйма. Также убираем свойство float у плавающих элементов, чтобы при печати веб-страницы блоки не съезжали.

Убираем лишние стили

При печати многие элементы сайта являются лишними: навигация, реклама, баннеры. Убираем их при помощи display:none.
У меня получилось нечто подобное:

Работа с гиперссылками

Убираем подчеркивание у ссылок, на печати они нам не понадобятся. Также выводим URL (в скобках рядом с текстом ссылки).

Постраничная разбивка на CSS

Свойство page-break-before позволяет устанавливать место разрыва страницы при печати.
Если мы поленились, и все стили находятся в одном css-файле, то код будет выглядеть следующим образом:

Получаем класс, который будет не виден на странице, но будет выполнять свое предназначение при печати.
Пример использования:

CSS-свойства: widows, orphans

Свойство widows задает минимальное число строк текста, которое располагается на следующей странице при печати документа.

Другое css-cвойство — orphans — задаёт минимальное количество строк, которые могут оставаться в нижней части страницы без разрыва страницы.
Если значение widows конфликтует со значением orphans, тогда widows будет иметь приоритет.
Пример использования:

Подводим итоги:

В результате у меня получилось что-то подобное:

Данная таблица стилей достаточна проста и, на мой взгляд, требует более детальной проработки отдельных элементов, но результат на печати весьма ощутим по сравнению с обычной таблицей стилей. Разумеется, CSS-файл будет довольно сильно отличаться в зависимости от дизайна, но общие принципы, указанные в статье, применимы к практически любому проекту.

Печатаем web-документ правильно с помощью CSS: 5 комментариев

хорошая статья. Пишите побольше эффектов, и с предпросмотром желательно!

Для разрыва страниц вставки дополнительных это единственный вариант? Я пробовала для р указать page-break-before: auto — не заработало.

По сути да. В зависимости от контента можно обойтись без дополнительных вставок, например, задавая стили для заголовков: h1

А повернуть страницу при печати подобным образом можно ??
Что то типа

Не приведете примерчик (для Мозилы) ??

Для поворота можете попробовать свойство -moz-transform: rotate. Например так

Но на печати результат может оказаться далеким от ожидаемого.

Илон Маск рекомендует:  Пример использования OnError
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL