page-break-after nie pracuje w flexboxes

Question

nie przyniosła oczekiwanych rezultatów wewnątrz podglądu wydruku Firefox:

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

W Chrome i IE I dostać 2 stron tak jak powinienem. Wygląda na to, że FF nie przerywa elementu div na 2 stronach, gdy przodek jest modułem flex. Czemu?

Answer 1

display: flex; 

to właściwość, która nie jest domyślnie zgodna z przeglądarką.

byłoby pomocne, jeśli miał skrzypce na przykład lub opracowane nieco więcej o tym, co starasz się osiągnąć, ale myślę, że to będzie działać:

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; 

Przykład: http://jsfiddle.net/yejxaq6h/5/

Answer 3

Firefox nie wykonuje poprawnie strony, nawet z elementami pływającymi, więc nie jestem zaskoczony, że flex nie działa. Źródło: CSS Page-Break Not Working in all Browsers

Ogólnie rzecz biorąc, obsługa łamania stron w Firefoksie nie jest świetna. Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

Jeśli potrzebujesz spójnych wyników drukowania w różnych przeglądarkach, odpowiedzią jest prawie zawsze użycie generowania plików PDF po stronie serwera, za pomocą narzędzia wkhtmltopdf lub princexml.

Answer 4

Jestem prawie pewien, że nie będzie działać w firefox.

rzeczy, które mogą złamać page-break są (używając page-break wewnątrz)

• tabele
• elementów pływających
• inline-block elementy
• elementy blokowe z granicami

Aby określić, czy należy zrobić przerwę, stosuje się następujące reguły:

1.Jeżeli którakolwiek z trzech wartości jest wymuszoną wartością przerwy, tj. zawsze, w lewo, w prawo, strona, kolumna lub region ma pierwszeństwo. Jeśli jedna z wartości jest taka, to jeden z elementów , który pojawia się jako ostatni w przepływie, jest brany pod uwagę (tj. Wartość przed przerwą ma wartość pierwszeństwa przed wartością break-after, która ma pierwszeństwo przed wartością break-after, która to wartość wynosinad wartością break-inside).

2. Jeżeli którykolwiek z trzy odnośnych wartości jest wartość uniknąć przerwy, to znaczy uniknąć uniknąć-PAGE uniknąć region unikać kolumny, bez przerwy, takie będą stosowane w tym punkcie.

Po zastosowaniu wymuszonych podziałów, można zastosować miękkie podziały, jeśli wymagana jest , ale nie w przypadku granic elementów, które występują w odpowiadającej wartości unikowej w postaci .

break after - CSS | MDN

W krótkich słowach, w Twoim przypadku przyczyną używasz go wewnątrz flex nie będzie działać.