page-break-inside: tránh tương đương với Firefox và/hoặc IE

Question

Tôi hiểu rằng lệnh CSS page-break-inside:avoid có nghĩa vụ ngăn chặn ngắt trang trong div khi tài liệu HTML được in. Thông qua tìm kiếm trên internet, tôi thấy rằng nó chỉ được hỗ trợ bởi Opera và IE8. Có một công việc xung quanh cho phép tôi để ngăn chặn ngắt trang trong Firefox (3.6) hoặc các phiên bản IE dưới 8?

Answer 1

Làm thế nào về chỉ phù hợp với tất cả các yếu tố bên trong phần tử của bạn, ngoại trừ những người đầu tiên, và họ đã không phá vỡ-trước

#yourelement *+*{ 
    page-break-before: avoid; 
} 

Answer 2

Xin lỗi, câu trả lời của tôi là "không thể", mặc dù tôi rất muốn nó nếu bất cứ ai có thể chứng minh tôi sai.

Tôi đã chạy vào cùng một vấn đề thời gian gần đây, và sau khi làm một chút nghiên cứu, tôi đã quyết định chỉ cần đi với

page-break-after: always; 

sau mỗi số nhiều yếu tố.

http://reference.sitepoint.com/css/page-break-inside

http://reference.sitepoint.com/css/page-break-after

Answer 3

Hãy thử sử dụng white-space:nowrap để thay thế. Điều này sẽ dừng văn bản phá vỡ bên trong phần tử, ít nhất là trong khi trên màn hình. Tôi không chắc làm thế nào nó dịch để in phương tiện truyền thông, nhưng nó có giá trị một thử.

Thông tin thêm: http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm

Answer 4

Đối với bất cứ điều gì mà không phải là firefox,

.dontsplit { border: 2px solid black; page-break-inside: avoid; } 

sẽ làm việc. Nhưng không phải cho firefox. Trong firefox, những gì bạn sẽ phải làm là kiểm tra chiều cao và sau đó thêm page-break-after: always; khi nó có liên quan.

Trung bình, lề sẽ là 1 inch ở trên và dưới. Vì vậy, để đo lường số trang pixel mà trang 10 inch sẽ tiêu thụ, tôi đã sử dụng điều này:

var pageOfPixels; 
(function(){ 
    var d = document.createElement("div"); 
    d.setAttribute("style", "height:9in;position:absolute;left:0px;top:0px;z-index:-5;"); 
    document.body.appendChild(d); 
    pageOfPixels = $(d).height(); 
    d.parentNode.removeChild(d); 
})(); 

Tôi có rất nhiều div với mỗi đoạn văn trong đó. Vì vậy, những gì tôi đã làm là tôi lặp qua chúng, và sau đó so sánh chiều cao hiện tại của chúng trên trang hiện tại với giá trị pageOfPixels.

var currentPosition = 0; 
$('.printDiv').each(function (index, element) { 
    var h = $(this).height(); 
    if (currentPosition + h > pageOfPixels) { 
     //add page break 
     $('.printDiv').eq(index - 1).css("page-break-after", "always"); 
     currentPosition = h; 
    } else { 
     currentPosition += h; 
    } 
}); 

Điều này làm việc cho tôi trong firefox.