разрыв страницы внутри Chrome не работает?

Question

У меня есть куча параграфов на странице:

<p> ... </p>
<p> ... </p>
<p> ... </p>

Правило CSS для этих абзацев:

p {
    margin: 20px 0;
    page-break-inside: avoid;
}

Демо: http://jsfiddle.net/KE9je/2/show/

Если я правильно понимаю свойство page-break-inside, вышеприведенное должно гарантировать, что ни один абзац не будет разбит на две страницы. (Абзац либо отображается на «текущей» странице, либо, если он не помещается полностью, он перемещается на следующую страницу.)

Похоже, это не работает в Chrome. Откройте демо, щелкните правой кнопкой мыши страницу, выберите «Печать ...». Вы увидите предварительный просмотр - пятый абзац разделен на страницы 1 и 2.

Что я делаю не так? Как я могу заставить это работать в Chrome?

---

Answer 1

На самом деле, это ДЕЛАЕТ работу в Chrome, и решение действительно глупо !!

И родитель, и элемент, над которым вы хотите управлять страницейвзлом должен быть объявлен как:

position: relative;

Проверьте это скрипка (или в полноэкранный )

Это верно для:

page-break-before
page-break-after
page-break-inside

Однако управление page-break-inside в Safari не работает (по крайней мере, в 5.1.7)

Надеюсь, это поможет !!!

Answer 2

Это лучше всего сработало для меня:

.no-page-break {
   display: inline-block;
   width: 100%;
   page-break-inside: avoid;
}

При необходимости вы также можете указать height.

Answer 3

Я знаю, что это старый вопрос, но Chrome изменился с тех пор, как на него изначально был дан ответ, и это может помочь.

Похоже, page-break-inside:avoid работает в Chrome, основываясь на высоте элемента, поэтому, если вы перемещаете кучу элементов в div, page-break-inside:avoid не будет работать.

Можно обойти это, явно указав высоту элемента, который вы не хотите разбивать. Пример jQuery:

$('#page_break_inside_avoid_element').height($('#page_break_inside_avoid_element').height());

Answer 4

По данным SitePoint, Chrome здесь не поддерживается, только Opera (и IE 8 глючит) ...

http://reference.sitepoint.com/css/page-break-inside

Другие ссылки:

http://www.webdevout.net

http://www.reddit.com/r/css/comments/jdeim/pagebreakinside_avoid_doesnt_work/

темы переполнения стека:

Кросс-браузерная поддержка `page-break-inside: избежать;`

«разрыв страницы: избегать» - не работает

Разрывы страниц в Google Chrome Printing

Какие браузеры поддерживают манипулирование разрывом страницы с помощью CSS и элемента разрыва страницы?

Форум Google Chrome:

http://www.google.com/support/forum

Я не буду публиковать ссылку W3Schools (из-за общей ненадежности), но они также заявляют, что она поддерживается только в Opera, во что бы то ни стало.

Answer 5

Я только что протестировал это с большим абзацем в IE9, Chrome 14 и Firefox 7, и похоже, что только IE9 работает, как и ожидалось.Возможно, вам придется прибегнуть к добавлению разрывов страниц вручную, где вы хотите их использовать с помощью

page-break-after:always

Конечно, это будет вам полезно, если вы заранее знаете длину контента.

Answer 6

Для Bootstrappers, имейте в виду, что page-break-inside или другие могут не (сильно) работать под container или row или другими классами начальной загрузки, даже если вы вручную измените свойство position. Когда я исключаю container и row, это работает как шарм!

Answer 7

проверить, отображается ли родительский (или контейнер верхнего уровня) flex;удалите его и попробуйте снова ； у меня работает в chrome71

Answer 8

Что сработало для меня (в FFox и Chrome, то есть)

.container {
  column-gap: .4em;
  columns: 3;
  padding: .4em;
}

.contained {
  page-break-before: avoid;
  page-break-inside: avoid;
  page-break-after: always;
}

И это все; Мне не нужно position.

Answer 9

Я боролся с этим некоторое время, и, следуя советам из других ответов, я должен был убедиться, что элемент и все родительские элементы имеют стиль Display: block;.

Answer 10

Это работает для меня, как это:

.print{position: absolute;}
.print p{page-break-inside: avoid}