Hướng dẫn html a4 page-break - html a4 ngắt trang

Tôi muốn in một tài liệu HTML+CSS lên giấy A4.

Mã đơn giản hóa của tôi ở đây:

The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 0
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 1
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 2
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 3
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 4
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 5
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 6
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 7
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 8
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 9
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 10
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 11
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 12
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 13
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 14
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 15
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 16
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 17
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 18
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 19
The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 20

Vấn đề là như sau: phần đệm phía dưới bị thiếu trong tất cả các trang và phần đệm trên cùng bị thiếu trong trang thứ hai, như bạn có thể thấy trên hình ảnh này:

Tôi đã tìm thấy nhiều giải pháp áp dụng ngắt trang thủ công với page-break-after: always hoặc page-break-before: always. Tuy nhiên, tôi muốn nếu phân trang là tự động và tất cả các mái chèo được thi hành trên tất cả các trang, như trong Microsoft Word. Nó là đủ nếu nó hoạt động trên Chrome 95.0.

Đã hỏi ngày 26 tháng 10 năm 2021 lúc 11:16Oct 26, 2021 at 11:16

Nếu tôi hiểu chính xác câu hỏi của bạn, bạn có thể muốn sử dụng lề trang thay vì phần đệm trên body. Đảm bảo đặt lề trang thành giá trị mặc định trong hộp thoại in. Nếu bạn không, lề trang tùy chỉnh của bạn (như được chỉ định trong CSS) sẽ bị ghi đè và không có tác dụng.

Biểu đồ của bạn sẽ trông giống như thế này:

@page {
  size:    A4 portrait;
  margin: 20mm;
}

body {
  width:   210mm;
  height:  297mm;
}

Đã trả lời ngày 26 tháng 10 năm 2021 lúc 11:30Oct 26, 2021 at 11:30

Sören Webersören WeberSören Weber

5457 Huy hiệu bạc24 Huy hiệu đồng7 silver badges24 bronze badges

6

Các quy tắc dưới đây có thể giúp bạn thêm ngắt trang cho các bảng.

table { 
    page-break-inside:auto 
}
tr    { 
    page-break-inside:avoid; page-break-after:auto 
}

Hoặc thử thêm một div như:

với Styles:

@media all {
    .page-break { display: none; }
}

@media print {
    .page-break { display: block; page-break-before: always; }
}

Đã trả lời ngày 26 tháng 10 năm 2021 lúc 11:19Oct 26, 2021 at 11:19

AachhyoaachhyoAachhyo

611 Huy hiệu bạc3 Huy hiệu đồng1 silver badge3 bronze badges

1