Trang-ngắt-bên trong: tránh không hoạt động

Question

Tôi có một bản định kiểu in cho trang web (Wordpress) của tôi và tôi muốn hình ảnh in trên một trang thay vì được chia thành các trang. Trong một số trường hợp, ngay cả dòng văn bản đang được chia trên các trang. Tôi đã bao gồm img {page-break: avoid;) trong bản định kiểu in của mình, nhưng không có may mắn. Tôi đã tìm thấy một số câu trả lời trước đây nhưng chúng đã cũ.

Có cách nào đáng tin cậy để in hình ảnh có kích thước vừa phải trên một trang thay vì chia nhỏ trên các trang không? Tại sao các dòng văn bản bị phá vỡ trên các trang?

Site: http://74.220.217.211/housing-developments/grafton-townhomes/

bài viết liên quan:

• Print styles: How to ensure image doesn't span a page break

• What are most useful media="print" specfic ,cross browser compatible css properties?

• What is the correct way to do the CSS to avoid page breaks?

• page-break-inside doesn't work in Chrome?
• Work around for page-break-inside:avoid

Answer 1

Hãy thử điều này:

.site-container, .site-inner (heck body tag possibly) {position:relative;} 

p { 
    page-break-inside: avoid; 
    position: relative; 
} 

Kiểm tra này FIDDLE

Thêm vào đó phương tiện truyền thông in của bạn

tôi chỉ xem xét này trong Chrome và có vẻ tốt đẹp trừ đi các hình ảnh đó cũng cần này:

img { 
    page-break-before: auto; 
    page-break-after: auto; 
    page-break-inside: avoid; 
    display: block; 
} 

Cuối cùng Wordpress có này nhưng trong thực tế không chắc chắn nếu nó giúp ...

<!--nextpage--> 

Answer 2

Tôi nghĩ rằng sự cố có thể đến từ thuộc tính position của các phần tử. Yếu tố bạn không muốn phá vỡ ở cuối trang và phụ huynh của nó nên được khai báo là:

position: relative; 

Phần còn lại của phong cách code đang đúng và nên trông giống như

@media print { 
    img { 
     page-break-before: auto; 
     page-break-after: auto; 
     page-break-inside: avoid; 
     position: relative; 
    } 
}