Control Page Breaks in PDF with CSS Attributes

The page breaks in the generated PDF document can be controlled using the following CSS properties:

  • page-break-before : always style forces a page break in PDF right before the box where the element is rendered

  • page-break-after : always style forces a page break in PDF right after the box where the element is rendered

  • page-break-inside : avoid style will make the converter to generate the PDF such that the element with this style is not cut between PDF pages if possible.

Below there is a HTML document which demonstrates the usage of the three styles controlling the page breaks in the generated PDF document and the code of a demo application to convert that HTML document to PDF.

HTML Document with PDF Page Breaks Control

 
<html>
<head>
    <title>Page Breaks Control</title>
    <style type="text/css">
        body
        {
            font-family: Times New Roman;
            font-size: 15px;
        }
    </style>
</head>
<body style="margin: 1px">
    <div style="width: 750px">
        <table style="page-break-after: always; width: 100%; height: 300px; border: 1px solid black;
            background-color: #F5F5F5">
            <tr>
                <td style="vertical-align: middle; text-align: center">
                    A page break will be forced in PDF right after this TABLE element
                </td>
            </tr>
        </table>
        <br />
        This text there is on a new PDF page because a page break was forced right after
        the TABLE above<br />
        <table style="page-break-before: always; width: 100%; height: 300px; border: 1px solid black;
            background-color: #F5F5F5">
            <tr>
                <td style="vertical-align: middle; text-align: center">
                    A page break was forced in PDF right before this TABLE element
                </td>
            </tr>
        </table>
        <br />
        <table style="page-break-before: always; width: 100%; border: 1px solid black; background-color: #F5F5F5">
            <tr>
                <td style="page-break-inside: avoid; border: 1px solid black;">
                    <b>The text inside this table row should not be cut between PDF pages.</b><br />
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </td>
            </tr>
            <!-- ..........-->
            <tr>
                <td style="page-break-inside: avoid; border: 1px solid black;">
                    <b>The text inside this table row should not be cut between PDF pages.</b><br />
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

PDF Page Breaks Control Demo

In this demo you learn how to control the page breaks in the generated PDF document using the three CSS styles described above.

Demo Source Code

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;

using HiQPdfClient;

namespace HiQPdf_Demo.Controllers
{
    public class PdfPageBreaksControlController : Controller
    {
        // GET: PdfPageBreaksControl
        public ActionResult Index()
        {
            SetCrtPageUri();

            return View();
        }

        [HttpPost]
        public ActionResult ConvertToPdf(IFormCollection collection)
        {
            string serverIP = collection["textBoxServerIP"];
            uint serverPort = uint.Parse(collection["textBoxServerPort"]);
            string serverPassword = collection["textBoxServerPassword"];

            // create the HTML to PDF converter
            HtmlToPdf htmlToPdfConverter = new HtmlToPdf(serverIP, serverPort);

            // use server password if necessary
            if (serverPassword.Length > 0)
                htmlToPdfConverter.ServerPassword = serverPassword;

            // set a demo serial number
            htmlToPdfConverter.SerialNumber = "YCgJMTAE-BiwJAhIB-EhlWTlBA-UEBRQFBA-U1FOUVJO-WVlZWQ==";

            // set browser width
            htmlToPdfConverter.BrowserWidth = int.Parse(collection["textBoxBrowserWidth"]);

            // convert HTML to PDF
            byte[] pdfBuffer = htmlToPdfConverter.ConvertHtmlToMemory(collection["textBoxHtmlCode"], collection["textBoxBaseUrl"]);

            FileResult fileResult = new FileContentResult(pdfBuffer, "application/pdf");
            fileResult.FileDownloadName = "PageBreaksControl.pdf";

            return fileResult;
        }

        private void SetCrtPageUri()
        {
            HttpRequest httpRequest = this.ControllerContext.HttpContext.Request;
            UriBuilder uriBuilder = new UriBuilder();
            uriBuilder.Scheme = httpRequest.Scheme;
            uriBuilder.Host = httpRequest.Host.Host;
            if (httpRequest.Host.Port != null)
                uriBuilder.Port = (int)httpRequest.Host.Port;
            uriBuilder.Path = httpRequest.PathBase.ToString() + httpRequest.Path.ToString();
            uriBuilder.Query = httpRequest.QueryString.ToString();

            ViewData["CrtPageUri"] = uriBuilder.Uri.AbsoluteUri;
        }
    }
}

See Also