Documentation
Pricing
evopdf.com
Insert Page Breaks in PDF Using CSS in HTML
You can insert page breaks before and after a HTML element in the generated PDF document by setting the 'page-break-before : always' and 'page-break-after : always' styles for that element in HTML.
Convert HTML String
Convert URL or Local File
HTML String With Page-Break-Before and Page-Break-After Styles
<!DOCTYPE html> <html> <head> <title>Insert Page Breaks Before and After HTML Elements Using CSS</title> <link href="styles/webfonts.css" type="text/css" rel="stylesheet"> </head> <body style="width: 1010px; font-family: Verdana, sans-serif; font-size: 20px; margin: 5px"> <div style="width: 100%; height: 500px; background-color: aliceblue; border: 2px solid gray; text-align: center"> <div style="width: 100%; height: 200px"></div> A block <b>without any page break</b> style<br /> <br /> [ Follows a block with <i>page-break-before : always</i> and <i>page-break-after : always</i> styles ] </div> <div style="page-break-before: always; page-break-after: always; width: 100%; height: 500px; background-color: gainsboro; border: 2px solid gray; text-align: center"> <div style="width: 100%; height: 200px"></div> A block with <b>page-break-before : always</b> and <b>page-break-after : always</b> styles<br /> <br /> <b>This block will be always rendered alone in a PDF page</b><br /> <br /> [ Follows a block with <i>page-break-after : always</i> style ] </div> <div style="page-break-after: always; width: 100%; height: 500px; background-color: beige; border: 2px solid gray; text-align: center"> <div style="width: 100%; height: 200px"></div> A block with <b>page-break-after : always</b> style<br /> <br /> <b>Nothing will be rendered after this block in PDF page</b> <br /> <br /> [ Follows a block <i>without any page break</i> style ] </div> <div style="width: 100%; height: 500px; background-color: aliceblue; border: 2px solid gray; text-align: center"> <div style="width: 100%; height: 200px"></div> A block <b>without any page break</b> style<br /> <br /> [ Follows a block with <i>page-break-before : always</i> style ] </div> <div style="page-break-before: always; width: 100%; height: 500px; background-color: lightgray; border: 2px solid gray; text-align: center"> <div style="width: 100%; height: 200px"></div> A block with <b>page-break-before : always</b> style<br /> <br /> <b>This block will always be rendered at the top of a PDF page</b> </div> </body> </html>
Base URL
HTML Page With Page-Break-Before and Page-Break-After Styles
Convert HTML to PDF
