Hướng dẫn html print overflow - html in tràn

Tôi đang tạo một báo cáo HTML sẽ có thể in và nó có "các phần" sẽ bắt đầu trong một trang mới.

Có cách nào để đặt một cái gì đó vào HTML/CSS sẽ báo hiệu cho trình duyệt mà nó cần để buộc một trang ngắt (bắt đầu một trang mới) tại thời điểm đó không?

Tôi không cần điều này để làm việc trong mọi trình duyệt ngoài kia, tôi nghĩ rằng tôi có thể bảo mọi người sử dụng một bộ trình duyệt cụ thể để in cái này.

sleske

79.1K34 Huy hiệu vàng183 Huy hiệu bạc223 Huy hiệu đồng34 gold badges183 silver badges223 bronze badges

Đã hỏi ngày 2 tháng 11 năm 2009 lúc 22:11Nov 2, 2009 at 22:11

Daniel Maglioladaniel MagliolaDaniel Magliola

29,8K61 Huy hiệu vàng162 Huy hiệu bạc240 Huy hiệu đồng61 gold badges162 silver badges240 bronze badges

0

Thêm lớp CSS có tên là "Pagebreak" (hoặc "PB"), như vậy:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

Sau đó thêm một thẻ div trống (hoặc bất kỳ phần tử khối nào tạo một hộp) nơi bạn muốn ngắt trang.

Nó sẽ không hiển thị trên trang, nhưng sẽ phá vỡ trang khi in.

P.S. Có lẽ điều này chỉ áp dụng khi sử dụng

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

1 (và cũng là những gì bạn có thể làm với các ____22 khác trên trang), nhưng tôi thấy rằng tôi phải tăng lớp CSS như sau:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

Đã trả lời ngày 2 tháng 11 năm 2009 lúc 22:12Nov 2, 2009 at 22:12

Chris Doggettchris DoggettChris Doggett

Huy hiệu vàng 19.2K459 Huy hiệu bạc86 Huy hiệu đồng4 gold badges59 silver badges86 bronze badges

8

Hãy thử liên kết này

Đã trả lời ngày 2 tháng 11 năm 2009 lúc 22:14Nov 2, 2009 at 22:14

1

First page (scroll down to see the second page)

Second page




Print (to see the result) 

Chỉ cần thêm cái này nơi bạn cần trang để chuyển sang trang tiếp theo (văn bản "Trang 1" sẽ ở trang 1 và văn bản "Trang 2" sẽ ở trang thứ hai).

Page 1

Page 2

Điều này cũng hoạt động:

First page (there is a break after this)

Second page (This will be printed in the second page)

Đã trả lời ngày 5 tháng 10 năm 2019 lúc 5:00Oct 5, 2019 at 5:00

PythonProgrammipyThonProgrammiPythonProgrammi

21.2k3 Huy hiệu vàng39 Huy hiệu bạc34 Huy hiệu đồng3 gold badges39 silver badges34 bronze badges

1

Chỉ muốn đặt một bản cập nhật.

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

3 là một tài sản kế thừa bây giờ.

Trang chính thức

Tài sản này đã được thay thế bởi tài sản phá vỡ.

Đã trả lời ngày 2 tháng 5 năm 2019 lúc 16:01May 2, 2019 at 16:01

Shahbaz A.Shahbaz A.Shahbaz A.

3.7494 Huy hiệu vàng29 Huy hiệu bạc53 Huy hiệu Đồng4 gold badges29 silver badges53 bronze badges

1

Bạn có thể sử dụng thuộc tính CSS

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

4 (hoặc

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

3). Chỉ cần đặt

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

6 trên các phần tử cấp khối đó (ví dụ: tiêu đề, các phần tử

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

7,

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

8 hoặc

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

9) sẽ bắt đầu trên một dòng mới.

Ví dụ: để gây ngắt dòng trước bất kỳ tiêu đề cấp 2 nào và trước bất kỳ yếu tố nào trong lớp

0 (ví dụ: ________ 31 ...), bạn sẽ sử dụng

h2, .newpage { page-break-before: always }

Đã trả lời ngày 21 tháng 1 năm 2014 lúc 23:21Jan 21, 2014 at 23:21

Jukka K. Korpelajukka K. KorpelaJukka K. Korpela

Phim thương hiệu vàng 190K3636 gold badges257 silver badges377 bronze badges

Hãy thử điều này (công việc của nó trong Chrome, Firefox và IE):

... content in page 1 ...
 
 
... content in page 2 ...

Đã trả lời ngày 23 tháng 12 năm 2020 lúc 7:21Dec 23, 2020 at 7:21

OusamaousamaOusama

1.5242 Huy hiệu vàng16 Huy hiệu bạc22 Huy hiệu đồng2 gold badges16 silver badges22 bronze badges

0

Ví dụ: mã bên dưới có mặt ở cuối trang và bạn muốn buộc HTML phải in trên trang khác để bạn có thể mã như thế này: below code is present at end of the page and you want to force HTML to print on another page so you can code like this

       

            

               

                  

                            

                                 
                            
                            

                                 
                            
                            

                                 
                            
                            

                                 
                            
                            

                                Approved by Director
                            
                        
                    
                
            

Mã chính Gose ở đây: Câu trả lời mong muốn

0

Bây giờ hãy viết mã còn lại cho trang thứ hai/một trang khác như thế này

1

Đã trả lời ngày 5 tháng 5 lúc 7:07May 5 at 7:07

Giả sử bạn có một blog với các bài viết như thế này:

2

Chỉ cần thêm điều này vào CSS đã làm việc cho tôi:

3

(Đã thử nghiệm và làm việc trên Chrome 69 và Firefox 62).

Tài liệu tham khảo:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-us/docs/web/css/page-break-after; Lưu ý quan trọng: Ở đây người ta nói

  2 nhưng nó không hoạt động với tôi với
  3. Ngoài ra, tài liệu MDN về
  3 dường như không cụ thể cho các lần chia trang, vì vậy tôi thích giữ (làm việc)
  5.

Đã trả lời ngày 21 tháng 9 năm 2019 lúc 21:15Sep 21, 2019 at 21:15

BASJBASJBasj

38.7K85 Huy hiệu vàng337 Huy hiệu bạc601 Huy hiệu Đồng85 gold badges337 silver badges601 bronze badges

CSS

4

HTML

5

Đã trả lời ngày 17 tháng 1 năm 2020 lúc 14:18Jan 17, 2020 at 14:18

Tôi cần một lần ngắt trang sau mỗi hàng thứ 3 trong khi chúng tôi sử dụng lệnh in trên trình duyệt.

Tôi đã thêm

6

Sau mỗi hàng thứ 3 và div cha mẹ của tôi có

6 vì vậy tôi đã xóa

6 và nó hoạt động như tôi muốn.

MGRAPH

15.1k4 Huy hiệu vàng40 Huy hiệu bạc73 Huy hiệu đồng4 gold badges40 silver badges73 bronze badges

Đã trả lời ngày 17 tháng 1 năm 2020 lúc 14:04Jan 17, 2020 at 14:04

Tôi đã đấu tranh này một thời gian, nó không bao giờ hoạt động.

Cuối cùng, giải pháp là đặt một yếu tố phong cách vào đầu.

Trang phá vỡ trang sau khi không thể nằm trong tệp CSS được liên kết, nó phải nằm trong chính HTML.

4b0

20.8K30 Huy hiệu vàng93 Huy hiệu bạc137 Huy hiệu đồng30 gold badges93 silver badges137 bronze badges

Đã trả lời ngày 22 tháng 1 năm 2021 lúc 15:50Jan 22, 2021 at 15:50

1

First page (scroll down to see the second page)

Second page




Print (to see the result) 

Đã trả lời ngày 6 tháng 10 năm 2021 lúc 16:32Oct 6, 2021 at 16:32

Mã dưới đây làm việc cho tôi và có một số ví dụ khác ở đây

8

Đã trả lời ngày 29 tháng 11 năm 2021 lúc 14:49Nov 29, 2021 at 14:49

RoshansroshansRoshanS

291 Huy hiệu bạc5 Huy hiệu đồng1 silver badge5 bronze badges

• Chúng tôi có thể thêm một thẻ phá vỡ trang với kiểu "Trang phá vỡ trang: Luôn luôn" tại điểm mà chúng tôi muốn giới thiệu trang web trong trang HTML.
  
• "Break-break-Before" cũng hoạt động

Example:

9

Mặc dù in tệp HTML bằng mã trên, bản xem trước in sẽ hiển thị ba trang (một trang cho mỗi khối HTML "html_block_n") trong đó trong trình duyệt, tất cả ba khối xuất hiện liên tục từng khối khác.

Đã trả lời ngày 19 tháng 12 năm 2019 lúc 11:24Dec 19, 2019 at 11:24

ChinmaychinmayChinmay

6905 Huy hiệu bạc9 Huy hiệu Đồng5 silver badges9 bronze badges

@Chris Doggett có ý nghĩa hoàn hảo.Mặc dù, tôi đã tìm thấy một thủ thuật hài hước trên lvsys.com, và nó thực sự hoạt động trên Firefox và Chrome.Chỉ cần đặt bình luận này bất cứ nơi nào bạn muốn trang phá vỡ trang được chèn.Bạn cũng có thể thay thế thẻ

8 bằng bất kỳ phần tử khối nào.

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

0

Đã trả lời ngày 30 tháng 8 năm 2016 lúc 21:03Aug 30, 2016 at 21:03

0