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

Question

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

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

<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?

51

html css google-chrome

Источник

user425275 09 окт '11 в 20:57

16 ответов

Другие вопросы по тегам html css google-chrome

user1237536 12 сен '12 в 10:54 2012-09-12 10:54 · Answer 1 · 2012-09-12 10:54

На самом деле, он работает в Chrome, и решение действительно глупо!

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

position: relative;

Проверьте эту скрипку (или в полноэкранном режиме)

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

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

Тем не менее, контролируя page-break-inside в Safari не работает (в 5.1.7, как минимум)

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

user3169378 14 дек '18 в 12:47 2018-12-14 12:47 · Answer 2 · 2018-12-14 12:47

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

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

Вы также можете указать height если нужно.

15

Источник

user3169378 14 дек '18 в 12:47

user4532595 22 авг '17 в 11:22 2017-08-22 11:22 · Answer 3 · 2017-08-22 11:22

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

9

Источник

user4532595 22 авг '17 в 11:22

user1905055 17 сен '15 в 23:41 2015-09-17 23:41 · Answer 4 · 2015-09-17 23:41

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

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

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

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

user11329904 04 июл '21 в 19:40 2021-07-04 19:40 · Answer 5 · 2021-07-04 19:40

Недавно я работал над историей загрузки pdf, в которой были динамические строки данных в формате таблицы, которые включают в себя различные изображения диаграмм (используемые технологии =>Angular + Spring + Thymleaf + Puppeteer). Некоторые из ключевых моментов для обработки разрывов страниц.

Попробуй использовать <div></div>блоки вместо HTML-таблиц
Не использовать display: flex в родительском контейнере, на котором вы хотите page-break-inside: avoid(использовать float в дочернем элементе)

.child1 {float: left; }

3. Если вы визуализируете div in loop и page-break-inside: избегайте; не работает Вы должны использовать этот CSS-хак для работы с определенным div

      <div class="parent-container">
<div class="child1"></div>
<div class="child2"></div>
</div>
.parent-container{
 position: relative;
 page-break-inside: avoid;
} 
.parent-container::after {
content: "";
display: block;
height: 200px;
margin-bottom: -200px;
}

user594235 09 окт '11 в 21:05 2011-10-09 21:05 · Answer 6 · 2011-10-09 21:05

Согласно 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: избежать;`

"page-break-inside: избежать"- не работает

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

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

Форум Google Chrome:

http://www.google.com/support/forum/p/Chrome/thread?tid=20090828aa91bc90&hl=en

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

19 янв '21 в 12:14 2021-01-19 12:14 · Answer 7 · 2021-01-19 12:14

Проверьте, не является ли отображение родительского контейнера встроенным ! Если так, то никогда не получится! Я трачу несколько часов, чтобы понять это.

Работает в Chrome 87

3

Источник

19 янв '21 в 12:14

23 мар '21 в 13:30 2021-03-23 13:30 · Answer 8 · 2021-03-23 13:30

Я решил это: моей проблемой был "родительский" div (а не "родительский" div), установленный как display:flex. Я установил его на display:block, и он работает.

2

Источник

23 мар '21 в 13:30

user4176989 24 дек '18 в 14:17 2018-12-24 14:17 · Answer 9 · 2018-12-24 14:17

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

2

Источник

user4176989 24 дек '18 в 14:17

user1729094 07 мар '18 в 02:02 2018-03-07 02:02 · Answer 10 · 2018-03-07 02:02

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

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

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

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

1

Источник

user1729094 07 мар '18 в 02:02

user9475521 07 окт '19 в 07:12 2019-10-07 07:12 · Answer 11 · 2019-10-07 07:12

Вот как я решил эту проблему при написании CSS для печати.

Например, вы помещаете несколько изображений в файл HTML следующим образом:

<div class="bottom">
    <figure>
        <img src="img01.jpg" alt="Front View">
        <figcaption>Front View</figcaption>
        </figure>
    <figure>
        <img src="img02.jpg" alt="Rear View">
        <figcaption>Rear View</figcaption>
    </figure>
</div>

И напишите css так:

.bottom figure{
  page-break-inside: avoid;
}

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

.bottom{
    display: contents;
}

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

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

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

user931545 09 окт '11 в 21:36 2011-10-09 21:36 · Answer 12 · 2011-10-09 21:36

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

page-break-after:always

Конечно, это хорошо для вас, если вы заранее знаете длину контента.

user5758316 15 дек '21 в 16:25 2021-12-15 16:25 · Answer 13 · 2021-12-15 16:25

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

Во-первых, давайте определим, что является родителем и дочерним элементом.

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

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

Родительские правила

display: block;
Дочерние правила

display: block; position: relative: page-break-inside: avoid;

Вот и все!

user2901561 14 дек '18 в 06:27 2018-12-14 06:27 · Answer 14 · 2018-12-14 06:27

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

1

Источник

user2901561 14 дек '18 в 06:27

user915663 16 апр '21 в 13:16 2021-04-16 13:16 · Answer 15 · 2021-04-16 13:16

Также page-break-inside: avoid может не работать, если один из родительских элементов имеет фиксированную высоту (скажем, height: 1000px). Я думаю, это потому, что браузер сначала пытается уместить контент по указанной высоте и только потом думает о разрыве страницы.

Переход на height: 100% исправил это для меня.

user6539677 01 июл '16 в 19:28 2016-07-01 19:28 · Answer 16 · 2016-07-01 19:28

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

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

0

Источник

user6539677 01 июл '16 в 19:28