Question 258829 in Html Question posted in
Some basic documentation can be found here.

The page-break-before property is not effective when generating HTML content for PDF documents

<table>some random content </table>

<div style="page-break-before:always">&nbsp;</div>

<div>some random content </div>

Hello everyone,

I’m currently using the code snippet above in an attempt to separate my table and the div element onto two separate pages when generating a PDF. However, it appears that   is not functioning as expected, and both the table and the div remain on the same page. I’ve also experimented with the CSS style and  , but encountered the same issue.

Tried Solution:

  1. <div style="break-before:always">&nbsp;</div>
  2. <div style="break-before:page">&nbsp;</div>
  3. <div style="page-break-before:page">&nbsp;</div>
  4. <div style="page-break-before:always">&nbsp;</div>
  5. CSS Style

I would appreciate any insights into the potential issues or solutions for achieving the desired page separation. Thank you!

Tags:

2

Answers


  1. 0

    The page-break-before CSS property doesn’t work on elements or most block-level elements when it comes to generating PDFs. It’s primarily intended for controlling page breaks when printing web pages, and its behavior can be inconsistent when it comes to PDF generation.

    If you want to ensure that your table and the following appear on separate pages in a PDF, you can use a different approach. One commonly used method is to wrap each section in a with a specific class and then apply a CSS rule to force page breaks before those classes. Here’s an example:

    <div class="page-break"> <!-- Page 1 content: your table -->
  <table>
    <!-- table content -->
  </table>
</div>

<div class="page-break"> <!-- Page 2 content: your <div> -->
  <div>
    <!-- div content -->
  </div>
</div>

    And in your CSS:

    .page-break {
  page-break-before: always;
}
    Login or Signup to reply.
  2. 0

    The page-break-before CSS property may not be supported by all browsers or PDF viewers. It is important to note that the behavior of page breaks can vary across different rendering engines and environments. You can try using different ways like adjusting margins, using page-break-inside, or using a different method for generating PDFs to achieve the desired page break behavior.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search