trang-break-sau không làm việc trong flexboxes

Question

này không tạo ra kết quả mong đợi bên trong xem trước khi in trong 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; 
} 

Trong Chrome và IE tôi nhận được 2 trang như tôi nên. Nó xuất hiện rằng FF không phá vỡ div trong 2 trang khi một tổ tiên là một hộp flex. Tại sao?

Answer 1

display: flex; 

là thuộc tính không theo mặc định, tương thích trình duyệt chéo.

nó sẽ rất hữu ích nếu bạn đã có một fiddle cho một ví dụ hay xây dựng thêm một chút về những gì bạn đang cố gắng để đạt được, nhưng tôi nghĩ rằng điều này sẽ làm việc:

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; 

Ví dụ: http://jsfiddle.net/yejxaq6h/5/

Answer 3

Firefox không thực hiện phân tích trang chính xác ngay cả với các phần tử nổi, vì vậy tôi không ngạc nhiên khi flex không hoạt động. Nguồn: CSS Page-Break Not Working in all Browsers

Nói chung, hỗ trợ ngắt trang Firefox không tuyệt vời. Xem: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

Nếu bạn cần kết quả in ấn nhất quán, kết quả in ấn, câu trả lời hầu như luôn sử dụng thế hệ PDF phía máy chủ, với công cụ như wkhtmltopdf hoặc princexml.

Answer 4

Tôi khá chắc chắn rằng sẽ không hoạt động trong firefox.

Những điều đó có thể phá vỡ trang-break được (sử dụng trang-break bên trong)

• bảng
• yếu tố nổi
• yếu tố inline-block
• yếu tố khối với biên giới

Để xác định xem giờ nghỉ có được thực hiện hay không, các quy tắc sau được áp dụng:

1.Nếu một trong ba giá trị liên quan là giá trị ngắt bắt buộc, đó là luôn luôn, trái, phải, trang, cột hoặc khu vực, nó được ưu tiên. Nếu một vài giá trị có liên quan là một khoảng ngắt, phần tử xuất hiện mới nhất trong luồng (nghĩa là giá trị break-before được ưu tiên hơn giá trị ngắt sau, trong đó tự có ưu tiên là qua giá trị phá vỡ bên trong).

2.If bất kỳ ba giá trị có liên quan là một giá trị nghỉ tránh, đó là tránh, tránh trang, tránh vùng, tránh cột, không bị gián đoạn như vậy sẽ được áp dụng tại điểm đó.

Sau khi áp dụng các ngắt cưỡng bức, có thể thêm ngắt mềm nếu cần , nhưng không phải trên ranh giới phần tử giải quyết trong giá trị tránh tương ứng.

break after - CSS | MDN

Nói cách ngắn, trong trường hợp của bạn vì bạn đang sử dụng nó bên flex sẽ không hoạt động.