Hướng dẫn page-break html

• Trang chủ
• Tham khảo
• CSS
• Thuộc tính page-break-after

Định nghĩa và sử dụng

Thuộc tính page-break-after xác định các phân chia văn bản ngay sau thành phần.

Thuộc tính page-break-after thường sử dụng cho văn bản print.

Cấu trúc

tag {
    page-break-after: giá trị;
}

Với giá trị như sau:

Ví dụ

HTML viết:

HỌC WEB CHUẨN
HỌC WEB CHUẨN

Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN

HỌC WEB CHUẨN

CSS viết:

p.breakAfter {
    page-break-after: always;
}

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN

HỌC WEB CHUẨN

Trình duyệt hỗ trợ

Thuộc tính page-break-after được hỗ trợ trong đa số các trình duyệt.

Từ trình duyệt IE8 trở xuống không hỗ trợ giá trị: left, right, inherit.

Từ trình duyệt Firefox, Chrome, Safari không hỗ trợ giá trị: avoid, left, right.

• Trang chủ
• Tham khảo
• CSS
• Thuộc tính page-break-inside

Định nghĩa và sử dụng

Thuộc tính page-break-inside xác định các phân chia văn bản ngay bên trong thành phần.

Thuộc tính page-break-inside thường sử dụng cho văn bản print.

Cấu trúc

tag {
    page-break-inside: giá trị;
}

Với giá trị như sau:

Ví dụ

HTML viết:

HỌC WEB CHUẨN
HỌC WEB CHUẨN

Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN

HỌC WEB CHUẨN

CSS viết:

p.breakInside {
    page-break-inside: always;
}

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN

HỌC WEB CHUẨN

Trình duyệt hỗ trợ

Thuộc tính page-break-inside được hỗ trợ trong đa số các trình duyệt.

Từ trình duyệt IE8 trở xuống không hỗ trợ giá trị: left, right, inherit.

Từ trình duyệt Firefox, Chrome, Safari không hỗ trợ giá trị: avoid, left, right.

answer

257

 http-equiv="Content-Type" content="text/html; charset=UTF-8">

 type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }



    
        
            
















heading
notes
x
x
x

257 hữu ích 5 bình luận chia sẻ

answer

40

Lưu ý: khi sử dụng ngắt trang sau: luôn luôn cho thẻ, nó sẽ tạo ngắt trang sau bit cuối cùng của bảng, tạo ra một trang hoàn toàn trống ở cuối mỗi lần! Để sửa lỗi này, chỉ cần thay đổi nó thành ngắt trang sau: auto. Nó sẽ phá vỡ chính xác và không tạo thêm một trang trống.

....

40 hữu ích 2 bình luận chia sẻ

answer

19

Mở rộng từ giải pháp Sinan Ünür:

 http-equiv="Content-Type" content="text/html; charset=UTF-8">

 type="text/css">
    table { page-break-inside:auto }
    div   { page-break-inside:avoid; } /* This is the key */
    thead { display:table-header-group }
    tfoot { display:table-footer-group }



    
        
            
        
        
            
        
        
            
        
        
            
        
        
        
            
        
    
    
heading
notes
Long />cell />should'nt />be />cut
Long />cell />should'nt />be />cut
x

Dường như page-break-inside:avoidtrong một số trình duyệt chỉ được xem xét cho các thành phần khối, không phải cho ô, bảng, hàng không phải là khối nội tuyến.

Nếu bạn cố gắng để display:blockcác TRthẻ, và sử dụng có page-break-inside:avoid, nó hoạt động, nhưng messes xung quanh với cách bố trí bảng.

19 hữu ích 2 bình luận chia sẻ

answer

9

Không có câu trả lời nào ở đây làm việc cho tôi trong Chrome. AAverin trên GitHub đã tạo ra một số Javascript hữu ích cho mục đích này và điều này hiệu quả với tôi:

Chỉ cần thêm js vào mã của bạn và thêm lớp 'splitForPrint' vào bảng của bạn và nó sẽ chia bảng gọn gàng thành nhiều trang và thêm tiêu đề bảng vào mỗi trang.

9 hữu ích 5 bình luận chia sẻ

answer

6

Sử dụng các thuộc tính CSS này:

page-break-after

page-break-before 

Ví dụ:

....

thông qua

6 hữu ích 5 bình luận chia sẻ

answer

4

Gần đây tôi đã giải quyết vấn đề này bằng một giải pháp tốt.

CSS :

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

JS :

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("
");
    window.print();
}

Hoạt động như một lá bùa!

4 hữu ích 0 bình luận chia sẻ

answer

1

Tôi đã kết thúc theo cách tiếp cận của @ Abbeyenteherrera, với một số điều chỉnh (có thể là bootstrap 3 cụ thể).

Về cơ bản; chúng tôi không thể phá vỡ trhoặc tdvì chúng không phải là các yếu tố cấp khối. Vì vậy, chúng tôi nhúng divs vào từng cái, và áp dụng các page-break-*quy tắc của chúng tôi chống lại div. Thứ hai; chúng tôi thêm một số phần đệm vào đầu của mỗi div này, để bù cho bất kỳ tạo tác tạo kiểu nào.

Các điều chỉnh lề và phần đệm là cần thiết để bù đắp một số loại jitter đã được giới thiệu (theo phỏng đoán của tôi - từ bootstrap). Tôi không chắc chắn rằng tôi đang trình bày bất kỳ giải pháp mới nào từ các câu trả lời khác cho câu hỏi này, nhưng tôi nghĩ có lẽ điều này sẽ giúp được ai đó.

1 hữu ích 0 bình luận chia sẻ

answer

0

Tôi đã kiểm tra nhiều giải pháp và bất cứ ai cũng không làm việc tốt.

Vì vậy, tôi đã thử một mẹo nhỏ và nó hoạt động:

t feet with style: position: fixed; bottom: 0px; được đặt ở cuối trang cuối cùng, nhưng nếu chân trang quá cao thì nó bị chồng chéo bởi nội dung của bảng.

chỉ với bàn chân: display: table-footer-group; không bị chồng chéo, nhưng không ở cuối trang cuối ...

Chúng ta hãy đặt hai bàn chân:

TFOOT.placer {
  display: table-footer-group;
  height: 130px;
}

TFOOT.contenter {
  display: table-footer-group;
  position: fixed;
  bottom: 0px;	
  height: 130px;
}

  class='placer'>