webentwicklung-frage-antwort-db.com.de

seitenumbruch funktioniert in Chrome nicht

Ich habe während des Druckens ein Problem mit page-break-after in Google Chrome. Es scheint, dass es nicht funktioniert. Ich habe Firefox ausprobiert und es ist in Ordnung. Mein Code lautet:

<div style="position: relative; display: block;">

    <div style="display: block; page-break-after: always; position: relative;">Page 1</div>

    <div style="display: block; position: relative; page-break-before:always;">Page 2</div>

</div>

Gibt es einen Trick, um es in Chrome zu erledigen?

9
Thommie

Es ist ein Hacker, aber Chrome unterstützt Seitenbrüche nicht sehr gut. Verwenden Sie also stattdessen Folgendes:

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="break-after">Page 1</div>
                <div class="break-before">Page 2</div>
            </div>
        </section>
    </main>
</body>

Und füge dies zu deinem CSS hinzu:

html, body, .main, .tabs, .tabbed-content { float: none; }

.break-after {
    display: block;
    page-break-after: always;
    position: relative;
}

.break-before {
    display: block;
    page-break-before: always;
    position: relative;
}
5
M Zeinstra

Bitte beachten Sie, dass bei einem Seitenumbruch kein Float vorhanden sein sollte.

Wenn Ihr Div also float: left sagt, setzen Sie es für den Druck zurück und sagen Sie: float: none. Damit wird der Seitenumbruch wieder funktionieren. 

1
Mohsin

Die vorherigen Antworten konnten nicht in Chrome im Oktober 2019) verwendet werden. Es scheint nun so zu sein, dass break-before: page muss verwendet werden anstatt break-before: always.

Dies funktioniert auch in FF, aber auch bei früheren Antworten.

<div>
  <div class="break-before">
    Page 1
  </div>
  <div class="break-before">
    Page 2
  </div>
</div>
.break-before {
  break-before: page;
}
0
t k