Page break issue in visualforce render as PDF

Question

I have just created a simple box on visualforce page rendering as PDF and it is coming out as below

At the top of the box, I have apex repeat, so this box's position would be dynamic as per the data on apex repeat tag.

I used below CSS to create the box

  .box {
                border: 1px solid black;
                margin: auto;
                width: 60%;
                text-align: center;
                height: 80px;
            }

HTML :

<div class="box ">
            <p class="signature">
                some text
            </p>
        </div>

and also sometimes if a td table data renders close to page split then comes as below

it vertically cuts the few portions of the line

in the code I have simple table tag with some td tags and no custom css added,

can anyone please suggest how to handle page break or is it possible to render everything on one long single page instead of splitting into multiple pages.

Answer 1

With a table, you should be able to use something like this:

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

I borrowed this from this answer on SO.

If you decide to remove the table, which I'd recommend, you can use page-break-before, page-break-inside, and page-break-after to force rendering on page boundaries.

You can also increase the page size:

<style>
  @page { margin: 0.25in; size: 8in 24in; }
</style>

Where the size is the width and height you desire.