Collapse
Expand
HTML to PDF Converter
Getting Started with HTML to PDF
HTML Content Destination and Scaling in PDF
Convert the Current HTML Page to PDF
Convert a HTML Page to PDF in Same Session
Merge Multiple HTML Pages into a Single PDF
Merge HTML with Existing PDF Documents
Partially Convert of a HTML Page to PDF
Repeat HTML Table Header and Footer in PDF
Headers and Footers
Page Breaks Control
Insert Page Breaks in PDF Using CSS
Avoid Page Break Inside Elements Using CSS
Insert Page Breaks in PDF Using API
Avoid Page Break Inside Elements Using API
Avoid Page Breaks Inside Images Using API
Screen and Print Media Types
Conversion Triggering Modes
Hierachical Bookmarks
Table of Contents
Live PDF Forms
HTML5 Features
HTTP GET and POST, Proxy Options
HTTP Headers and Cookies
Fonts Embedding
HTML Elements Location in PDF
HTML Elements Visibility in PDF
URI Links in PDF
Internal Links in PDF
File Links and Attachments
Text Notes in PDF
PDF Actions
HTML to PDF Elements
HTML to Image Elements
Images Quality in Generated PDF
Flash and Extensions Support
Watermarks and Stamps
PDF/A and PDF/X Standards
CMYK and GrayScale Color Spaces
PDF Viewer Preferences
PDF Security Features
HTML to Image Converter
PDF Creator
PDF Editor
Live Demo
Description
Sample Code
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. The Full Description and a Code Sample can be accessed from the top tabs.
Use TCP/IP Server
IP Address:
Port:
Use Web Service
URL:
Service Password:
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> </head> <body style="width: 1010px; font-family: 'Times New Roman'; 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
