Принудительно печатать разрывы страниц с помощью CSS

Question

У меня есть страница, которая в основном отображает все рабочие задания на данный день.Я попытался создать HTML-код, чтобы можно было использовать разрыва страницы: всегда, чтобы создать логический разрыв страницы и продолжить.Однако, когда пользователь печатает страницу, на одной странице часто возникают наложения, несколько рабочих заданий и т. Д. Я просто хочу принудительно установить разрыв страницы, который будут слушать Firefox, Safari и Chrome.

MyHTML выглядит следующим образом

<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>
<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>
<!-- repeat N times -->
<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>

, а мой CSS в основном выглядит так:

.WOPrint
{
    max-width: 100%;
    padding-bottom: 3em;
}

.WOHeader
{
    display: block;
    page-break-inside: avoid;
}

.WOPageBreak
{
    height: 1px;
    width: 100%;
    float: left;
    page-break-after: always;
    display: block;
}

EDIT В хакерской попытке я поэкспериментировал с настройкой класса WOPrintмин-высота.Изменение его на 9 дюймов, кажется, дает мне достаточно места для печати со всех Safari, Firefox и Chrome, когда я установил его на стандартный размер бумаги США.Это, конечно, не тот способ, которым я бы хотел это исправить, но я также не хочу делать рендеринг в PDF.

.WOPrint
    {
        max-width: 100%;
        padding-bottom: 3em;
        min-heihgt: 9in
    }

Answer 1

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

см. совместимость разрыва страницы до и разрыв страницы после совместимость

Вы также можете попробовать встраивать Ctrl-L в страницу в те моменты, когда я уверен, что многие драйверы принтеров проигнорируют это.

Answer 2

Все, что вам нужно, это

.WOPageBreak
{
    page-break-before: always;
}

Однако вы также захотите добавить « overflow: visible » к тегу body, потому что без него Firefox будет печатать только первую страницу.

Вы также можете получить более последовательные результаты, если при печати установите поле 0 на теле, например:

@media print{body{margin:0}}

Answer 3

Установив min-height в CSS-классе WOPrint, я могу подделать приблизительный разрыв страницы для страницы стандартной высоты:

.WOPrint
    {
        max-width: 100%;
        padding-bottom: 3em;
        min-height: 9in;
    }