page-break- * funktioniert nicht in Chrome und Safari

Question

Ich weiß, dass es viele Fragen zu diesem Thema gibt, aber ich konnte immer noch keine funktionierende Lösung finden. So, hier ist mein html:

<div class="row"> 
    <div class="col-xs-12"> 
     <div class="row print-break"> 
     <div class="col-xs-8 col-xs-offset-2"> 
      <!-- Some Content --> 
     </div> 
     </div> 
     <div class="row print-break"> 
     <div class="col-xs-8 col-xs-offset-2"> 
      <!-- Some Content --> 
     </div> 
     </div> 
     <div class="row print-break"> 
     <div class="col-xs-8 col-xs-offset-2"> 
      <!-- Some Content --> 
     </div> 
     </div> 
    </div> 
    </div> 

und CSS:

@media print { 
    .print-break { 
     page-break-after: always; 
     page-break-inside: avoid; 
    } 
} 

Und es kommt vor, dass Firefox Seitenumbrüche einfügen richtig; Chrome und Safari nicht.

Weiß jemand, wie man das überwindet? Oder wo irre ich mich?

Answer 1

Ihr spezifischer Code hat ein paar Punkte der Diskussion, diese individuell sind richtig, aber zusammen verursachen Ihr Problem.

Leider funktioniert page-break-after anders als Browser zu Browser, man kann kein Verhalten annehmen und wir müssen daher auf ein einfacheres, bekanntes Verhalten zurückgreifen.

Einige Browser nicht page-break auf einem div mit einem Eltern, die eine float und/oder eine width hat.

Ich gehe von Ihrem Code aus, dass Sie Bootstrap (?) Verwenden. Sie haben ein verschachteltes Raster im Code: Die äußere Zeile/Spalte ist 12 breit. (Warum innerhalb eines 12-wide Elterns verschachteln?) Diese äußere Spalte setzt width: 100%, damit Safari seine untergeordneten Elemente nicht page-bricht - so werden Ihre verschachtelten Elemente nicht page-break.

Ich kann nicht sagen, warum Sie auf einer 12-wide verschachteln, aber wenn Sie das entfernen können, dann funktioniert Ihr Seitenumbruch.

ich persönlich auch page-break in einem unabhängigen, Separator-Tag (ein div oder ein span) - dies macht den Code leichter zu lesen und ich kann den Tag auch Stil, wenn ich will.

Sie brauchen auch nicht zu row jede Zeile, nur ein clearfix wird ‚neue Zeile‘, und dies ermöglicht es uns, den gleichen Separator zu verwenden.

Ein nicht verschachteltes Umschreiben des Codes funktioniert also dann (oder tut es in meiner Safari):

<div class="row"> 
    <div class="col-xs-8 col-xs-offset-2"> 
    Some Content 1 
    </div> 
    <div class="print-break clearfix"></div> 
    <div class="col-xs-8 col-xs-offset-2"> 
    Some Content 2 
    </div> 
    <div class="print-break clearfix"></div> 
    <div class="col-xs-8 col-xs-offset-2"> 
    Some Content 3 
    </div> 
</div> 

Und CSS wil sein:

@media print { 
    .print-break { 
    page-break-after: always; 
    } 
} 

(Sie müssen nicht wirklich brauchen @media print - es ist in diesem Zusammenhang überflüssig.)

Answer 2

Stellen Sie sicher, dass Element mit page-break-after: always; hat n o Eltern mit float Eigenschaft auf einen anderen Wert als none; eingestellt, überprüfen Sie auch, dass es ein block Element ist. Wenn es inline-block Element ist, wird es keinen Seitenumbruch überhaupt anwenden.