web-dev-qa-db-fra.com

page-break-after ne fonctionne pas dans Chrome

J'ai un problème avec page-break-after dans Google Chrome lors de l'impression. Il semble que ça ne marche pas. J'ai essayé Firefox et tout va bien là-bas. Mon code est:

<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>

Y at-il une astuce pour le faire dans Chrome?

htmlcssgoogle-chromepage-break
9
Thommie

C'est un hack, mais Chrome ne supporte pas très bien les sauts de page. Alors essayez d'utiliser ceci à la place:

<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>

Et ajoutez ceci à votre css:

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

S'il vous plaît noter pour le saut de page au travail, div ne devrait pas avoir de float!

Donc, si votre div a dit float: left, réinitialisez-la pour l’impression en disant: float: none et le saut de page fonctionnera à nouveau. 

1
Mohsin