Не работает page break after always

CSS Page-Break не работает во всех браузерах

у меня возникли проблемы с получением этой работы в большинстве браузеров, за исключением IE (он даже работает правильно в IE6) и Opera.

Firefox правильно разделяет divs, но печатает только первую страницу.

Chrome и Safari применяет разрыв страницы только к последнему div.

как я могу заставить это работать во всех браузерах правильно?

дивы с идентификаторами #leftNav и #mainBody не установлено float:left , так они хорошо смотрятся.

Я только хочу напечатать .pageBreak классы, скрывающие #leftNav а остальные #mainBody С CSS.

8 ответов

родительские элементы не могут иметь float на них.

задание float:none на всех родительских элементов делает page-break-before:always правильно работать.

другие вещи, которые могут сломать разрыв страницы: использование разрыва страницы внутри таблиц, плавающих элементов, элементов встроенного блока и элементов блока с границами.

ради завершения и в интересах других, у кого такая же проблема, я просто хочу добавить, что мне также пришлось добавить overflow: visible к тегу body, чтобы FireFox подчинялся разрывам страниц и даже печатал больше, чем просто первую страницу.

Я обнаружил, что классы Bootstrap Twitter добавляют кучу вещей на страницу, что затрудняет работу разрывов страниц. Firefox работал сразу, но мне пришлось следовать различным предложениям, чтобы заставить его работать в Chrome и, наконец, IE (11).

я следовал предложениям здесь и в других местах. Единственное свойство, которое я «обнаружил», которое я еще не видел,-это»размер коробки». Bootstrap может установить это свойство в «box-sizing: border-box», которое сломало IE. — IE-дружественная настройка — «box-sizing: content-box». К этому меня привело предостережение о» блочных элементах с границами», сделанное Ричардом Парнаби-Кингом https://stackoverflow.com/a/5314590/3397752.

похоже, что это немного гонка вооружений, чтобы обнаружить следующее свойство, которое может нарушить разрывы страниц.

это настройка, которая работала для меня (Chrome, FF, IE 11). В принципе, он пытается переопределить все проблемные настройки на всех divs на печатной странице. Конечно, это также может нарушить форматирование, и это будет означать, что вам придется найти другой способ настройки страницы.

хотя это не особо документировано, следует отметить, что свойства разрыва страницы не могут быть применены к элементам таблицы. Если у вас есть какие-либо элементы, которые имеют display: table; или display:table-cell; применяется к ним (распространено во многих шаблонах в классе clearfix), то содержащиеся элементы будут игнорировать правила разрыва страницы. Просто отменяет правило в таблице стилей печати, и вы должны быть в порядке (после того, как поплавки были сняты, конечно!).

вот пример как это сделать для популярной проблемы clearfix.

изменить: Я забыл добавить, что другое место, с которым я столкнулся, — это когда шаблон объявил всю страницу (обычно называемую main или main wrapper) с display:inline-block;

если раздел находится внутри встроенного блока, он не будет работать, поэтому держите глаза открытыми и для них. Изменение или перезапись display:inline-block; С display:block должны работать.

надеюсь, что это помогает!

» версии Firefox до 3.5 и включая их не поддерживают значения avoid, left или right.» Поддержка IE тоже частично вы можете достичь того, что нужно :page-break-before:always; который поддерживается во всех браузерах «но только распечатайте первую страницу» : Я не думаю, что это связано с css , я полагаю, что это sth в окне печати браузера:)

Я position: absolute; в печати div, которая заставила это не работать.

существует решение, если у родителя есть float . Для элемента, к которому применен разрыв страницы, сделайте элемент overflow:hidden. Это все. У меня получилось.

Источник

page-break-* doesn’t work on Google chrome

I just like the divs under .wp_left_col div be placed in separate pages. This is my css code.

It works on Firefox. How come it doesn’t work on Google Chrome?

6 Answers 6

So, after some frustration, I found a solution. It’s a hack, but Chrome doesn’t support page breaks properly, so.. You have to set all of the parent elements to explicitly float: none. In this example, I’m printing tabbed content.

Then your CSS looks similar to this.

It’s July 2014, and as of today doing float: none; for all parent elements is what worked for me:

This solution works on Firefox, Chrome and Safari. I have the !important in there because I’m using Bootstrap, and bootstrap does a float: left by default on divs.

3 years later float:none !important for div was the solution for getting the break working in chrome. Not necessary to float:none all parents ( body or html )

here’s an easier solution for setting all parent elements to not float on print:

Chrome has problems processing page-break-after, and page-break-inside this is a known bug and Google has said a few times to avoid using this type of styling since not only Chrome but many more browsers run into problems using it.

You should consider styling the tables thought DIV’s rather than the tables themselves. Personally in this day and age its normally best to avoid using tables as they are not as flexible as DIV styling.

DIV styling as mentioned is more flexible and easy to work with and looks almost the same on all browsers since browsers tend to render tables differently across browers.

Here is a simple example of how to style the first table you have in DIV and is by far pixel perfect but should give you an idea. Almost the same with some improvement but without the font you use doesn’t look as good, doesnt use image as the background which is ++ 😛

CSS

HTML

I’ve saved this code online for you to see and test, take a look at http://jsfiddle.net/tsd4V/

Again this is just a better method you can use table styling but don’t use page-break if you want good cross browser compatibility.

Источник

CSS Page-Break Not Working in all Browsers

I’m having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.

Firefox separates the divs correctly but only prints the first page.

Chrome and Safari only applies the page break to the last div.

How can I get this working across all browsers correctly?

The divs with the IDs #leftNav and #mainBody are are set to float:left , so they display nicely.

I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.

9 Answers 9

Parent elements can not have float on them.

Setting float:none on all parent elements makes page-break-before:always work correctly.

Other things that can break page-break are:

• using page-break inside tables
• floating elements
• inline-block elements
• block elements with borders

The last statement of your answer is very important. I had to cut my

in many parts and set different fixed size on every single columns so the said columns would not adjust to the content and still look great. I now wish to destroy every single printer in the world. Thanks for the clarifications

For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.

I’ve found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I’ve had to follow various suggestions to get it to work in Chrome and, finally, IE (11).

I followed the suggestions here and elsewhere. The only property I «discovered» that I haven’t seen yet mentioned is «box-sizing». Bootstrap can set this property to «box-sizing: border-box», which broke IE. An IE-friendly setting is «box-sizing: content-box». I was led to this by the caveat about «block elements with borders» made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.

It looks like it’s a bit of an arms race to discover the next property that might break page-breaks.

This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you’ll have to find another way to set up the page.

Источник

Разрывы страниц. Html — страницы — page-break-after не работает ▍Верхние и нижние висячие строки

Меня этот твит зацепил. Я вдруг понял, что уже и не вспомню, когда оптимизировал веб-страницы для печати или хотя бы проверял то, как они выводятся на принтер.

Основное внимание в ходе веб-разработки приковано к электронным версиям сайтов. Страницы приходится проверять во множестве браузеров, испытывать на разных размерах окон… До принтеров ли тут. А может, я забыл о стилях для печати потому что сам редко делаю бумажные копии страниц. Как бы там ни было, я почувствовал, что ситуацию надо срочно исправлять.

Печатный вариант веб-страницы имеет такое же право на существование, как и электронный. И, если мы стремимся к тому, чтобы сделать наши материалы как можно доступнее, не стоит пренебрегать бумажными носителями информации. Кроме того, не следует делать предположений о пользователях и об их поведении. Люди всё ещё распечатывают веб-страницы на принтерах. Просто представьте себе статьи или посты в блогах, страницы с рецептами, контактными сведениями, схемами проезда или со списками объявлений. Рано или поздно кто-нибудь непременно попытается распечатать что-то из того, что вы разместили в интернете.

Вот что говорит по этому поводу Хейдон Пикеринг, автор книги «Inclusive Design Patterns»: «Я уже давно не пользуюсь домашними принтерами. Дело тут в том, что у меня возникает ощущение, будто они ломаются минут через десять после того, как запустишь печать. Но я – не все».

Если сейчас вы поняли, что, как и я, не уделяли должного внимания стилям для печати, надеюсь, мой рассказ сослужит вам хорошую службу и поможет быстро освежить память. А если вы вообще никогда не оптимизировали веб-страницы для принтеров, моя небольшая коллекция полезных CSS-приёмов позволит вам к такой оптимизации приступить.

1. Использование CSS-стилей для печати

Body < font-size: 18px; >@media print < /* здесь будут стили для печати */ body < font-size: 28px; >>
Как вариант, можно вынести стили для печати в самостоятельный файл и подключить его в HTML, но при таком подходе понадобится дополнительный запрос при загрузке страницы.

2. Тестирование

В зависимости от браузера, можно экспортировать страницу в PDF, воспользоваться функцией предварительного просмотра или даже отлаживать страницу прямо в веб-обозревателе.

Для отладки стилей печати в Firefox, откройте Панель разработчика , воспользовавшись комбинацией клавиш Shift + F2 или выполнив команду меню Разработка → Панель разработки . Введите в командной строке, расположенной в нижней части окна, следующее: media emulate print , завершив ввод нажатием Enter . Активная вкладка будет действовать так, если бы для неё media type было бы print , до тех пор, пока вы не закроете или не обновите страницу.

Эмуляция печати в Firefox

В Chrome тоже имеется подобная возможность. Откройте Инструменты разработчика , для чего, в MacOS, можно воспользоваться комбинацией клавиш CMD + Opt + I , в Windows – Ctrl + Shift + I , или выполните команду меню Дополнительные инструменты → Инструменты разработчика . После этого откройте панель рендеринга. Один из способов сделать это заключается в том, чтобы, нажав на клавишу Esc , вывести панель Console , а затем, через меню, открыть панель Rendering . В панели рендеринга установите флаг Emulate CSS Media и выберите Print .

Эмуляция печати в Chrome

Ещё о тестировании печатных версий веб-страниц можно почитать на StackOverflow .

3. Абсолютные единицы измерения

4. Свойства страниц

@media print < @page < margin: 1cm; >>
Правило @page – это часть стандарта Paged Media Module , который предлагает множество замечательных вещей, вроде выбора первой страницы для печати, настройки пустых страниц, позиционирования элементов в углах страницы и . Его можно использовать даже для того, чтобы готовить к печати книги .

5. Управление разрывами страниц

▍Разрыв страницы перед элементом

▍Разрыв страницы после элемента

▍Разрыв страницы внутри элемента

▍Верхние и нижние висячие строки

Например, если последняя строка абзаца на текущей странице не помещается, на следующей странице будут напечатаны последние две строки этого абзаца. Это происходит из-за того, что свойство, которое это контролирует (widows , то есть – «верхние висячие строки») по умолчанию установлено в значение 2. Это можно изменить.

P < widows: 4; >
Если возникла другая ситуация и лишь одна строка абзаца помещается на текущей странице, весь абзац будет напечатан на следующей странице. Свойство, ответственное за нижние висячие строки (orphans), по умолчанию так же установлено в 2.

P < orphans: 3; >
Смысл вышеприведённого кода заключается в том, что для того, чтобы абзац не переносился целиком на следующую страницу, как минимум три строки должны поместиться на текущей странице.

Для того, чтобы лучше в этом разобраться, взгляните на пример, подготовленный с помощью CodePen . А вот – отладочная версия того же примера, её удобнее тестировать.

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line < background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; >
Кстати, CSS-стили для печати – одно из немногих исключений, где директива!important – это абсолютно нормально;)

7. Удаление ненужного контента

8. Вывод адресов ссылок

Для того, чтобы вывести адреса ссылок после их текстовых представлений, достаточно воспользоваться следующим стилем:

A:after < content: " (" attr(href) ")"; >
Конечно, при таком подходе «расшифровано» будет много лишнего. Например, относительные ссылки, абсолютные ссылки на том же сайте, где размещена печатаемая страница, ссылки с якорями и так далее. Для того, чтобы не засорять печатную страницу, лучше будет использовать примерно такую конструкцию:

A:not():after < content: " (" attr(href) ")"; >
Выглядит это, конечно, безумно. Поэтому объясню смысл данного правила обычным языком: «Отобразить значение атрибута href около каждой ссылки, у которой есть такой атрибут, который начинается с http , но не содержит mywebsite.com ».

9. Расшифровка сокращений

10. Принудительная печать фона

11. Медиа-запросы

@media screen and (min-width: 48em) < /* только для экрана */ >
Почему это так? Всё дело в том, что CSS-правила применяются только в том случае, если значение min-width равно 48em , и если media-type – это screen . Если избавиться в этом медиа-запросе от ключевого слова screen , то он окажется ограниченным лишь значением min-width .

12. Распечатка карт

13. QR-коды

14. О печати неоптимизированных страниц

Блок страницы состоит из области страницы, где располагается содержимое и области полей, окружающей область страницы. Правило @page используется для изменения некоторых css-свойств при печати документа. Изменить можно только поля элемента margin , а также задать разрывы страниц в указанном месте.

Можно задавать отдельные поля документа внутри правила @page , такие как margin-top , margin-right , margin-bottom , margin-left:

2. Разрывы страниц

Управлять разрывами страниц можно с помощью свойств page-break-before , page-break-after и page-break-inside . Данные свойства применяются к блочным элементам, для которых свойство position имеет значение relative или static .

page-break-before
Значения:
auto
always	Всегда добавляет разрыв страницы перед элементом.
avoid	Отменяет размещение разрыва перед элементом, если это возможно.
left	Добавляет один или два разрыва страниц перед элементом, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right	Добавляет один или два разрыва страниц перед элементом. Элемент будет печататься, начиная с верха правой границы. Следующая страница будет форматироваться как правая страница.
inherit

page-break-after
Значения:
auto	Значение по умолчанию, задает автоматические разрывы страниц.
always	Всегда добавляет разрыв страницы после элемента.
avoid	Отменяет добавление разрыва после элемента, если это возможно.
left	Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right	Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как правая страница. Элемент будет печататься, начиная с верха правой границы.
inherit	Наследует это свойство от родительского элемента.

Свойство page-break-inside говорит браузеру, может ли страница разрываться внутри элемента или нет. Но в случае, если элемент оказывается длиннее страницы, то разрыв неизбежен.

Хотя мы живем в цифровую эпоху, где все может быть легко доступно, все еще есть много людей, которые предпочитают читать длинный текст с бумаги. Есть вероятность, что часть пользователей распечатает текст с вашего сайта, чтобы читать его не за компьютером.

Возможность приведения содержимого в вид, подходящий для печати, существовала давно. Мы можем сделать это, используя правило @media в таблице стилей, следующим образом:

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

Что оно делает?

Если вы работали с текстовыми редакторами, такими как Microsoft Word и Pages, вам должно быть знакомо меню разрыва страницы, которое позволяет перенести текст на следующую страницу.

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

Использование разрыва страницы

Для примера мы создали демонстрационную страницу, которую собираемся распечатать. Мы нашли на ней неудачный перенос, как вы можете видеть ниже.

Будет лучше выглядеть, если заголовок и нижняя висячая строка начнутся на следующей странице.

Чтобы это сделать, мы используем свойство page-break-after и зададим ему значение always , чтобы заставить следующий элемент перейти на следующую страницу.

Затем вы можете создать между элементов новый элемент с классом, или назначить класс предыдущему элементу таким образом.

With the Eraser feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t.

The phone to travel With

S Translator is going to be a great tool for your travels as .

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

Верхние и нижние висячие строки

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

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

Используя свойства orphans (нижняя висячая строка) и widows (верхняя висячая строка) мы можем задать минимальный порог. В приведенном ниже примере мы задаем, чтобы как минимум три строки остались внизу или в начале абзаца, где происходит разрыв страницы.

Дополнительные источники

Мы рассмотрели основы использования разрыва страницы на печати для текстов на сайте, и мы надеемся, что это вдохновит вас обдумать стили для печати вашего сайта, чтобы содержимое хорошо выглядело как на экране, так и на бумаге.

Разрывы страниц

В следующих разделах описана модель форматирования страницы, используемая в CSS2. Для указания агенту пользователя места, где он может или должен осуществить разрыв страницы, и страницы (левой или правой), на которой он должен продолжить вывод содержимого, используется пять различных свойств. Каждый разрыв страницы прерывает отображение содержимого в текущем страничном блоке и инициирует вывод оставшейся части дерева документа в новом страничном блоке.

Разрывы до и после элементов: «page-break-before», «page-break-after», «page-break-inside»

Начальное значение: auto
Наследование: нет
Процентное задание: N/A

Значение: auto | always | avoid | left | right | наследуемое
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Значение: avoid | auto | наследуемое
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Значения данных свойств имеют следующий смысл:

Не инициирует и не запрещает разрыва страницы до (после или внутри) генерируемого блока.

Всегда инициирует разрыв страницы до (после) генерируемого блока.

Отменяет разрыв страницы до (после или внутри) генерируемого блока.

Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как левая страница.

Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как правая страница.

Потенциально возможное местоположение разрыва страницы определяется свойством «page-break-inside» родительского элемента, свойством «page-break-after» предшествующего элемента и свойством «page-break-before» последующего элемента. Если значения этих свойств отличны от «auto», то значения «always», «left» и «right» превосходят по приоритету значение «avoid». В разделе о допустимых разрывах страниц указаны четкие правила, позволяющие инициировать или запрещать разрывы страниц с помощью этих свойств.

Использование именованных страниц: «page»

Значение: | auto
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Свойство «page» может использоваться для определения конкретного типа страницы, на которой будет отображен элемент.

В этом примере все таблицы будут помещены по правую сторону страницы (называемой «rotated»), имеющей альбомную ориентацию:

Действие свойства «page» осуществляется следующим образом: если значение свойства «page» страничного блока, содержимое которого принадлежит строковому уровню, отличается от значения аналогичного свойства предшествующего страничного блока, содержимое которого также принадлежит строковому уровню, то между ними вставляется один или два разрыва страницы, после которых вывод производится в именованном страничном блоке. См. ниже раздел о принудительных разрывах страниц.

В следующем примере две таблицы отображаются на страницах с альбомной ориентацией (естественно, на одной и той же странице, если они обе умещаются на ней), тип страницы «narrow» не используется вообще, несмотря на то, что он установлен для элемента DIV.

используются в документе

Разрывы страниц внутри элементов: «orphans», «widows»

Значение: | наследуемое
Начальное значение: 2
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Значение: | наследуемое
Начальное значение: 2
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Свойство «orphans» определяет минимальное количество строк абзаца, которые должны быть оставлены в нижней части страницы. Свойство «widows» определяет минимальное количество строк абзаца, которые должны быть оставлены в верхней части страницы. Примеры использования данных свойств для управления разрывами страниц приводятся ниже.

Подробную информацию о форматировании абзацев можно получить в разделе о линейных блоках.

Допустимые разрывы страниц

В нормальном потоке разрыв страницы может находиться в следующих местах:

1. В пространстве, отведенном для вертикальных полей между структурными блоками. Если разрыв страницы осуществляется в этом месте, то вычисляемые значения соответствующих свойств «margin-top» и «margin-bottom» устанавливаются равными «0».
2. Между линейными блоками внутри блока структурного уровня.

Разрывы рассматриваемого типа удовлетворяют следующим правилам:

• Правило А: Разрыв (1) разрешен, только если значения свойств «page-break-after» и «page-break-before» всех элементов, порождающих блоки, встречающиеся в месте разрыва, допускают его осуществление, что имеет место тогда, когда по крайней мере одно из них имеет значение «always», «left» или «right», или все они одновременно имеют значение «auto».
• Правило Б: Тем не менее, если все эти свойства имеют значение «auto», а свойство «page-break-inside» ближайшего общего для всех названных элементов предка имеет значение «avoid», то разрыв страницы в этом месте запрещается.
• Правило В: Разрыв страницы (2) разрешен, только если количество линейных блоков между разрывом и началом заключительного структурного блока равно значению свойства «orphans» или превышает его, а количество линейных блоков между разрывом и концом блока равно значению свойства «widows» или превышает его.
• Правило Г: Более того, разрыв страницы (2) разрешен, только если свойство «page-break-inside» имеет значение «auto».

Если приведенные выше правила не позволяют вставить достаточное количество разрывов, то во избежание выхода содержимого за пределы страничного блока правила Б и Г не учитываются, что позволяет создать дополнительные разрывы.

Если и после этого не удается достигнуть достаточного количества разрывов, то для поиска дополнительных точек разрыва не учитываются правила А и В.

Разрывы страницы не могут осуществляться в абсолютно позиционируемых блоках.

Принудительные разрывы страниц

Разрыв страницы должен осуществляться (1), если хотя бы одно из всех свойств «page-break-after» и «page-break-before» элементов, порождающих блоки, встречающиеся в месте разрыва, принимает значение «always», «left» или «right».

Разрыв страницы также должен осуществляться (1), если значения свойства «page» линейных блоков, находящихся непосредственно до и после разрыва, различны.

«Наилучшие» разрывы страниц

Язык CSS2 не определяет, какой именно разрыв страницы из множества допустимых разрывов должен использоваться; CSS2 не запрещает агентам пользователей вставлять разрывы страниц в любом месте или вообще не использовать их. Но в спецификации CSS2 настоятельно рекомендуется, чтобы агенты пользователей соблюдали следующие эвристические правила (до тех пор, пока не окажется, что они иногда противоречат друг другу):

• разрыв страниц должен производиться как можно реже;
• все страницы, которые не заканчиваются принудительным разрывом, должны быть примерно одинаковой высоты;
• не должно быть разрывов внутри блока, у которого есть граница;
• не должно быть разрывов внутри таблицы;
• не должно быть разрывов внутри перемещаемого объекта.

Предположим, что таблица стилей содержит свойства «orphans: 4» и «widows: 2», а в нижней части текущей страницы доступно 20 строк (линейных блоков):

• если последний абзац текущей страницы содержит не более 20 строк, то он должен остаться на текущей странице;
• если абзац содержит 21 или 22 строки, а вторая часть абзаца не должна нарушать ограничения, устанавливаемого свойством «widows», то в силу этого его вторая часть должна состоять из двух строк;
• если в абзаце более 23 строк, то первая его часть должна состоять из 20 строк, а вторая часть должна включать все остальные строки.

Теперь предположим, что значение свойства «orphans» равно «10», значение свойства «widows» равно «20», а в нижней части текущей страницы доступно 8 строк:

• если абзац в конце текущей страницы содержит не более 8 строк, то он должен остаться на текущей странице;
• если абзац содержит более 9 строк, то его нельзя делить (т.к. при этом будет нарушено ограничение, устанавливаемое свойством «orphans»). Поэтому его следует переместить на следующую страницу в виде блока.

Источник