Google Chrome Printing Разрывы страниц
Я пытаюсь заставить Google Chrome делать разрывы страниц.
Мне сказали через кучу веб-сайтов, что page-break-after: always; действительно в chrome, но я не могу заставить его работать даже на очень простом примере. Есть ли способ заставить разрыв страницы при печати в Chrome?
16 ответов
Я успешно использовал следующий подход во всех основных браузерах, включая Chrome:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
Это упрощенный пример. В реальном коде каждый div страницы содержит еще много элементов.
На самом деле, в ответе отсутствует одна деталь, выбранная как принятая (от Фила Росса)....
это работает в Chrome, и решение действительно глупо!
И родитель, и элемент, для которого вы хотите управлять разрывом страницы, должны быть объявлены как:
position: relative
проверить эту скрипку: http://jsfiddle.net/petersphilo/QCvA5/5/show/
Это верно для:
page-break-before
page-break-after
page-break-inside
Однако управление разбиением на страницы в Safari не работает (по крайней мере, в 5.1.7)
надеюсь, это поможет!!!
PS: вопрос ниже поднял тот факт, что последние версии Chrome больше не уважают это, даже с позиции: относительной; трюк. Тем не менее, они, кажется, уважают:
-webkit-region-break-inside: avoid;
посмотреть эту скрипку: http://jsfiddle.net/petersphilo/QCvA5/23/show
так что я думаю, что мы должны добавить это сейчас...
Надеюсь это поможет!
Я просто хотел заметить, что Chrome также игнорирует настройки page-break- * css в перемещенных элементах div.
Я подозреваю, что есть веское оправдание этому где-то в спецификации CSS, но я подумал, что это может кому-нибудь когда-нибудь помочь;-)
Еще одно замечание: IE7 не может подтвердить настройки разрыва страницы без явной высоты предыдущего элемента блока:
У меня была проблема, похожая на эту, но я нашел решение в конце концов. У меня был переполнение-х: скрытый; применяется к тегу , поэтому независимо от того, что я сделал ниже в DOM, он никогда не допустит разрывов страниц. Возвращаясь к переполнению-х: видимый; это работало нормально.
Надеюсь, это поможет кому-то там.
Остерегайтесь CSS: display:inline-block при печати.
Ни одно из свойств CCS для перехода на следующую страницу не сработало бы для меня в Chrome и Firefox, если бы моя таблица была внутри элемента div со стилем display:inline-block
Например, следующее не работает:
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
Но следующие работы:
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
Я сам столкнулся с этой проблемой - мои разрывы страниц работают во всех браузерах, кроме Chrome, - и смог изолировать ее до элемента разрыва страницы, находящегося внутри ячейки таблицы. (Старые, унаследованные шаблоны в CMS.)
Очевидно, что Chrome не учитывает свойства разрыва страницы до или разрыва страницы в ячейках таблицы, поэтому в этой измененной версии примера Фила второй и третий заголовок помещается на той же странице:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
Реализация Chrome (сомнительно) разрешена с учетом спецификации CSS - вы можете увидеть больше здесь: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en
Обновление 2016 года:
Ну, у меня возникла эта проблема, когда я имел
overflow:hidden
на мой div.
После того как я сделал
@media print {
div {
overflow:initial !important
}
}
все стало просто отлично и идеально
Я сталкивался с этой проблемой на Chrome раньше, и причина в том, что у div есть значение min-height, установленное в значение. Решением было сбросить минимальную высоту при печати следующим образом:
@media print {
.wizard-content{
min-height: 0;
}
}
Это помогло мне (2021 Chrome):
@media print {
.page-break {
display: block;
break-before: always;
page-break-before: always;
}
}
Сейчас 2021 год, и эта тема является первым результатом поиска точной проблемы с Chrome. Я обнаружил, что это очень простое решение, которое работает и может быть вставлено в ваш без каких-либо дополнительных усилий, чтобы хотя бы повлиять на разрыв страницы Chrome в середине:
<style>
@media print {
tr, th, td {
page-break-inside: avoid !important;
}
}
</style>
Надеюсь, это поможет кому-то сэкономить время.
Похоже, что это относительно недавно (февраль 2014 года) обсуждалось (на старом билете ошибок 2005 года) на трекере ошибок веб-набора
Если вы используете Chrome с Bootstrap Css, классы, которые управляют макетом сетки, например, col-xs-12 и т. Д., Используют "float: left", который, как отмечали другие, разрушает разрывы страниц. Удалите их со своей страницы для печати. Это сработало для меня. (В версии Chrome = 49.0.2623.87)
Имейте эту проблему. Прошло так много времени... Без боковых полей страницы это разрывается нормально, но когда появляются поля, страница и "пространство разрыва страницы" масштабируются. Так, с нормальным полем, внутри документа, оно было показано неверно. Я исправляю это с помощью набора
width:100%
и использовать
div.page
{
page-break-before: always;
page-break-inside: avoid;
}
Используйте это на первой линии.
Насколько я знаю, единственный способ получить правильные разрывы страниц в таблицах с помощью Google Chrome - это передать его элементу. <tr> свойство display: inline-table (или display: inline-block, но оно лучше подходит для других случаев, которые не являются таблицами). Также следует использовать свойства "page-break-after: всегда; page-break-inside: избежать;" как написано @Phil Ross
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
Я печатал 16 этикеток на странице A4 в альбомной ориентации, 4 этикетки в строке, страница разрывалась в последней строке, и только 12 этикеток были на одной странице только в хроме, я использовал
Это работало на меня, когда я использовал padding, например:
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>