page-break-after nicht in flexboxes Arbeits

Question

Dies gilt nicht das erwartete Ergebnis innerhalb Druckvorschau in Firefox produzieren:

<aside> 
    side 
</aside> 

<div> 
    <p> page 1 </p> 
    <p> page 2 </p> 
</div> 

CSS:

body{ 
    display: flex; 
} 

aside{ 
    flex: none; 
    width: 100px; 
} 

div{ 
    flex: auto; 
} 

p{ 
    break-after: always; 
    page-break-after: always; 
} 

In Chrome und IE bekomme ich 2 Seiten wie ich sollte. Es scheint, dass FF das div auf 2 Seiten nicht bricht, wenn ein Vorfahr eine Flex-Box ist. Warum?

Answer 1

display: flex; 

ist eine Eigenschaft, die standardmäßig nicht mit dem Browser kompatibel ist.

es wäre hilfreich, wenn Sie eine Geige für ein Beispiel hatte oder erarbeitet ein bisschen mehr auf das, was Sie erreichen wollen, aber ich denke, das funktioniert:

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works)*/ 
display: -ms-flexbox;/* TWEENER - IE 10 */ 
display: -webkit-flex;/* NEW - Chrome */ 
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 

Answer 2

word-wrap: break-word; 

Beispiel: http://jsfiddle.net/yejxaq6h/5/

Answer 3

Firefox macht Seitenumbruch auch mit Float-Elementen nicht korrekt, also bin ich nicht überrascht, dass Flex nicht funktioniert. Quelle: CSS Page-Break Not Working in all Browsers

Im Allgemeinen ist Firefox-Seitenumbruch Unterstützung nicht groß. Siehe: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

Wenn Sie konsistente, browserübergreifende Druckergebnisse benötigen, ist die Antwort fast immer serverseitige PDF-Generierung mit einem Tool wie wkhtmltopdf oder princexml.

Answer 4

Ich bin mir ziemlich sicher, dass das in Firefox nicht funktionieren wird.

Dinge, die Seite-break brechen können, sind (unter Verwendung von Seitenumbruch innen)

• Tabellen
• Schwimmelemente
• inline-Blockelemente
• Blockelemente mit Grenzen

Um zu definieren, ob eine Pause gemacht werden muss, werden die folgenden Regeln angewendet:

1.Wenn einer der drei betroffenen Werte ein Zwangspausenwert ist, also immer, links, rechts, Seite, Spalte oder Region, hat er Vorrang. Wenn mehrere der betroffenen Werte eine solche Unterbrechung ist, wird das Element , das als letztes im Datenfluss erscheint, übernommen (dh der Vorrang vor dem Abbruchwert, der selbst Vorrang hat über den Einbruchswert).

2. Wenn eine der drei betroffenen Werte ist ein avoid Bruchwert, dh vermeiden, abwehren-Seite, vermeiden-Region, vermeiden-Säule, eine solche Pause wird an diesem Punkt angewendet werden.

Sobald erzwungene Unterbrechungen angewendet wurden, können weiche Unterbrechungen hinzugefügt werden, wenn benötigt wird, aber nicht an Elementgrenzen, die in einem entsprechenden vermeidenden Wert aufgelöst werden.

break after - CSS | MDN

Kurz gesagt, in Ihrem Fall führen, dass Sie es in flex wird nicht funktionieren, verwenden.