У меня есть куча абзацев на странице:
<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?
На самом деле, он работает в Chrome, и решение действительно глупо !!
И родитель, и элемент, для которого вы хотите управлять разрывом страницы, должны быть объявлены как:
position: relative;
Проверьте эту скрипку (или в полноэкранном режиме)
Это верно для:
page-break-before
page-break-after
page-break-inside
Однако управление page-break-inside в Safari не работает (по крайней мере, в 5.1.7)
Надеюсь, это поможет!!!
Это сработало лучше для меня:
.no-page-break {
display: inline-block;
width: 100%;
page-break-inside: avoid;
}
Вы также можете указать height если это необходимо.
Согласно SitePoint, Chrome здесь не поддерживается, только Opera (и IE 8 багги)...
http://reference.sitepoint.com/css/page-break-inside
Другие ссылки:
http://www.reddit.com/r/css/comments/jdeim/pagebreakinside_avoid_doesnt_work/
Потоки:
Кросс-браузерная поддержка` page-break-inside: avoid; `
"page-break-inside: avoid" - не работает
Нарушения страницы печати Google Chrome
Google Chrome Forum:
http://www.google.com/support/forum
Я не буду размещать ссылку W3Schools (из-за общей ненадежности), но они также заявляют, что она поддерживается только в Opera, что бы она ни стоила.
Я знаю, что это старый вопрос, но Chrome изменился с тех пор, как он был изначально ответил, и это может помочь.
Похоже, что page-break-inside:avoid работает в Chrome на основе высоты элемента, поэтому, если вы плаваете кучу элементов в div, page-break-inside:avoid не будет работать.
Можно обойти это, явно определяя высоту элемента, который вы не хотите разбивать. Пример jQuery:
$('#page_break_inside_avoid_element').height($('#page_break_inside_avoid_element').height());
Я просто тестировал это с большим абзацем в IE9, Chrome 14 и Firefox 7, и похоже, что только IE9 работает так, как ожидалось. Возможно, вам придется прибегать к добавлению разрывов страниц вручную, где вы хотите их с помощью
page-break-after:always
Конечно, это только любая польза для вас, если вы заранее знаете длину контента.
Что сработало для меня (в FFox и Chrome, то есть)
.container {
column-gap: .4em;
columns: 3;
padding: .4em;
}
.contained {
page-break-before: avoid;
page-break-inside: avoid;
page-break-after: always;
}
И это оно; Мне не нужна была position.
Для Bootstrappers, имейте в виду, что page-break-inside или другие не могут (сильно) работать под container или row или другими классами начальной загрузки, даже если вы измените свойство позиции вручную. Когда я исключаю container и row, это работает как шарм!
Это работает для меня, например:
.print{position: absolute;}
.print p{page-break-inside: avoid}
Я боролся с этим некоторое время, а также следую советам в других ответах, которые я должен был убедиться, что элемент и все родительские элементы имеют стиль Display: block;.
проверьте, является ли родительский (или контейнер верхнего уровня) дисплеем flex; удалите его и попробуйте снова ； у меня работает в chrome71
Вот как я решил эту проблему, когда писал 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.
Что касается вашего вопроса, я предлагаю вам взглянуть на режим отображения контейнера абзаца, чтобы увидеть, установлен ли он на блокировку. Если это так, измените его на содержимое и повторите попытку.
Я надеюсь, что это поможет.