Я пытаюсь заставить google chrome делать разрывы страниц.
Мне сообщили через кучу веб-сайтов, что page-break-after: always; действителен в chrome, но я не могу заставить его работать даже с очень простым примером. есть ли способ заставить разрыв страницы при печати в хроме?
Я успешно использовал следующий подход во всех основных браузерах, включая 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 больше не уважают это, даже с позицией: relative; трюк. Однако они, похоже, уважают:
-webkit-region-break-inside: avoid;
см. эту скрипку: http://jsfiddle.net/petersphilo/QCvA5/23/show
поэтому я думаю, что мы должны добавить это сейчас...
Надеюсь, это поможет!
У меня сама проблема: мои разрывы страниц работают в каждом браузере, но в 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
Я просто хотел заметить, что Chrome также игнорирует настройки page-break- * css в плавающих платах.
Я подозреваю, что для этого где-то в спецификации css есть обоснованное обоснование, но я подумал, что это может кому-то когда-нибудь помочь; -)
Еще одно примечание: IE7 не может подтвердить настройки разрыва страницы без явной высоты на предыдущем элементе блока:
У меня была проблема, подобная этому, но я нашел решение в конце концов. У меня был overflow-x: hidden;, примененный к <html> так что независимо от того, что я сделал ниже в DOM, он никогда не разрешит разрывы страниц. Вернувшись к переполнению-x: visible;, он работал нормально.
Надеюсь, это поможет кому-то там.
Остерегайтесь 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 раньше, и причина этого в том, что div имел минимальную высоту, установленную в значение. Решение было reset min-height при печати следующим образом:
@media print {
.wizard-content{
min-height: 0;
}
}Обновление 2016 года:
Ну, у меня эта проблема, когда у меня была
overflow:hidden
в моем div.
После того, как я сделал
@media print {
div {
overflow:initial !important
}
}
все стало прекрасно и прекрасно
Похоже, что это относительно недавно (февраль 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 (или показать: inline -block, но он лучше подходит в других случаях, которые не являются таблицами). Также следует использовать свойства "page-break-after: always; page-break-inside: avoid;" как написано @Phil Ross
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
Это работало для меня, когда я использовал дополнение, например:
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>