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

IyPQQ.png

ОТВЕТЫ

Ответ 1

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

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

position: relative;

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

Согласно 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: avoid; `

"page-break-inside: avoid" - не работает

Нарушения страницы печати Google Chrome

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

Google Chrome Forum:

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

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

Ответ 4

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

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

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

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

Ответ 5

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

page-break-after:always

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

Ответ 6

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

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

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

И это оно; Мне не нужна была position.

Ответ 7

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

Ответ 8

Это работает для меня, например:

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

Ответ 9

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

Ответ 10

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

Ответ 11

Вот как я решил эту проблему, когда писал 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.

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

Я надеюсь, что это поможет.