In CSS: Tránh các DIV cắt ngang giữa các trang?

Tôi đang viết một trình cắm cho một phần mềm có một bộ sưu tập lớn các mục và đưa chúng vào HTML trong WebView trong Ca cao (sử dụng WebKit làm trình kết xuất của nó, vì vậy về cơ bản bạn có thể giả sử tệp HTML này đang được mở trong Safari).

Các DIV mà nó tạo ra có chiều cao động, nhưng chúng không thay đổi quá nhiều. Chúng thường khoảng 200px. Dù sao, với khoảng sáu trăm trong số các mục này trên mỗi tài liệu, tôi đang có một thời gian thực sự khó khăn để in nó. Trừ khi tôi gặp may mắn, có một mục được cắt làm đôi ở dưới cùng và trên cùng của mỗi trang và điều đó thực sự khiến việc sử dụng các bản in rất khó khăn.

Tôi đã thử ngắt trang trước, ngắt trang sau, ngắt trang và kết hợp cả ba không thành công. Tôi nghĩ rằng có thể WebKit không hiển thị đúng hướng dẫn hoặc có thể tôi không hiểu cách sử dụng chúng. Ở mức nào, tôi cần sự giúp đỡ. Làm cách nào tôi có thể ngăn chặn một nửa số DIV của mình khi in?

Điều này sẽ làm việc:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

Xin lưu ý hỗ trợ trình duyệt hiện tại (12-03-2014) :

• Chrome - 1.0+
• Firefox (Tắc kè) - 19.0+
• Internet Explorer - 8.0+
• Opera - 7.0+
• Safari - 1.3+ (312)

Chỉ là một giải pháp một phần: Cách duy nhất tôi có thể làm cho điều này hoạt động với IE là bọc từng div trong bảng riêng của nó và đặt ngắt trang bên trong bảng để tránh.

page-break-inside: avoid; đã gây rắc rối cho tôi khi sử dụng wkhtmltopdf.

Để tránh ngắt trong văn bản thêm display: table; vào CSS của div chứa văn bản.

Tôi hy vọng điều này làm việc cho bạn quá. Cảm ơn JohnS.

page-break-Inside: tránh; chắc chắn không hoạt động trong webkit, thực tế đã là một vấn đề được biết đến hơn 5 năm nay https://bugs.webkit.org/show_orms.cgi?id=5097

Theo như nghiên cứu của tôi đã đi, không có phương pháp nào được biết để thực hiện điều này (tôi đang làm việc để tìm ra bản hack của riêng mình)

Lời khuyên tôi có thể cung cấp cho bạn là, để thực hiện chức năng này trong FF, hãy bọc nội dung mà bạn không muốn phá vỡ bên trong DIV (hoặc bất kỳ vùng chứa nào) với tràn: auto (chỉ cần cẩn thận không gây ra các thanh cuộn lạ hiển thị bằng cách định cỡ các thùng chứa quá nhỏ).

Đáng buồn thay, FF là trình duyệt duy nhất tôi quản lý để thực hiện điều này và webkit là trình duyệt tôi lo lắng hơn.

Các giá trị có thể cho ngắt trang sau là: auto, always, avoid, left, right

Tôi tin rằng bạn không thể sử dụng tài sản phá vỡ trang trên các yếu tố được định vị tuyệt đối.

Tôi có cùng một vấn đề bu chưa có giải pháp nào. ngắt trang không hoạt động trên trình duyệt nhưng Opera. Một cách khác có thể là sử dụng ngắt trang sau: tránh; trên tất cả các phần tử con của div để giữ togehter ... nhưng trong các thử nghiệm của tôi, thuộc tính tránh không hoạt động, vd. trong Firefox ...

Những gì hoạt động trong tất cả các trình duyệt ppular là bắt buộc ngắt trang bằng cách sử dụng, ví dụ. ngắt trang sau: luôn luôn

Một cạm bẫy mà tôi gặp phải là một phần tử cha có thuộc tính 'tràn' được đặt thành 'tự động'. Điều này phủ nhận các phần tử div con với thuộc tính ngắt trang trong phiên bản in. Nếu không, page-break-inside: avoidhoạt động tốt trên Chrome đối với tôi.

Trong trường hợp của tôi, tôi đã cố gắng khắc phục các khó khăn ngắt trang trong webkit bằng cách đặt các div đã chọn của tôi thành ngắt trang: tránh và cũng đặt tất cả các thành phần để hiển thị: nội tuyến. Vì vậy, như thế này:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

Có vẻ như các thuộc tính ngắt trang chỉ có thể được áp dụng cho các thành phần nội tuyến (trong webkit). Tôi đã cố gắng chỉ áp dụng hiển thị: nội tuyến cho các yếu tố cụ thể tôi cần, nhưng điều này không hoạt động. Điều duy nhất có hiệu quả là áp dụng nội tuyến cho tất cả các yếu tố. Tôi đoán đó là một trong những div container lớn 'đang làm mọi thứ rối tung lên.

Có lẽ ai đó có thể mở rộng về điều này.

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

Đối với tất cả các trình duyệt mới, giải pháp này hoạt động. Xem caniuse.com/#search=page-break-inside

page-break-inside: avoid;dường như không phải lúc nào hoạt động. Nó dường như tính đến chiều cao và vị trí của các yếu tố container.

Ví dụ, inline-block các yếu tố cao hơn trang sẽ bị cắt bớt.

Tôi đã có thể khôi phục page-break-inside: avoid;chức năng làm việc bằng cách xác định một thành phần chứa display: inline-blockvà thêm:

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

Hy vọng điều này sẽ giúp những người phàn nàn rằng "đột nhập trang không hoạt động".