Avoid Page Breaks Inside HTML Elements Using CSS

You can avoid page breaks inside the HTML elements rendered to PDF using the page-break-inside:avoid CSS attribute in HTML elements styles. If a HTML element has this CSS attribute and the HTML element would be normally rendered on two PDF pages then converter will try to move the rendering of the element to the beginning of the next PDF page. This is possible only if the element height is smaller than the next PDF page height.

Code Sample - Avoid Page Breaks Inside HTML Elements Using CSS

C#
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

// Use EVO PDF Namespace
using EvoPdfClient;

namespace EvoHtmlToPdfDemo.HTML_to_PDF.Page_Breaks
{
    public partial class Avoid_Page_Breaks_Inside_HTML_Elements_Using_CSS : System.Web.UI.Page
    {
        protected void convertToPdfButton_Click(object sender, EventArgs e)
        {
            // Get the server IP and port
            String serverIP = textBoxServerIP.Text;
            uint serverPort = uint.Parse(textBoxServerPort.Text);

            // Create a HTML to PDF converter object
            HtmlToPdfConverter htmlToPdfConverter = null;
            if (radioButtonUseTcpService.Checked)
                htmlToPdfConverter = new HtmlToPdfConverter(serverIP, serverPort);
            else
                htmlToPdfConverter = new HtmlToPdfConverter(true, textBoxWebServiceUrl.Text);

            // Set optional service password
            if (textBoxServicePassword.Text.Length > 0)
                htmlToPdfConverter.ServicePassword = textBoxServicePassword.Text;

            // Set license key received after purchase to use the converter in licensed mode
            // Leave it not set to use the converter in demo mode
            htmlToPdfConverter.LicenseKey = "4W9+bn19bn5ue2B+bn1/YH98YHd3d3c=";

            // Set an adddional delay in seconds to wait for JavaScript or AJAX calls after page load completed
            // Set this property to 0 if you don't need to wait for such asynchcronous operations to finish
            htmlToPdfConverter.ConversionDelay = 2;

            byte[] outPdfBuffer = null;

            if (convertHtmlRadioButton.Checked)
            {
                string htmlWithForm = htmlStringTextBox.Text;
                string baseUrl = baseUrlTextBox.Text;

                // Convert the HTML string with page-break-inside:avoid styles to a PDF document in a memory buffer
                outPdfBuffer = htmlToPdfConverter.ConvertHtml(htmlWithForm, baseUrl);
            }
            else
            {
                string url = urlTextBox.Text;

                // Convert the HTML page with page-break-inside:avoid styles to a PDF document in a memory buffer
                outPdfBuffer = htmlToPdfConverter.ConvertUrl(url);
            }

            // Send the PDF as response to browser

            // Set response content type
            Response.AddHeader("Content-Type", "application/pdf");

            // Instruct the browser to open the PDF file as an attachment or inline
            Response.AddHeader("Content-Disposition", String.Format("attachment; filename=Avoid_Page_Breaks_Inside_HTML_Elements_Using_CSS.pdf; size={0}", outPdfBuffer.Length.ToString()));

            // Write the PDF document buffer to HTTP response
            Response.BinaryWrite(outPdfBuffer);

            // End the HTTP response and stop the current page processing
            Response.End();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string currentPageUrl = HttpContext.Current.Request.Url.AbsoluteUri;
                string rootUrl = "http://www.evopdf.com/demo/";

                htmlStringTextBox.Text = System.IO.File.ReadAllText(Server.MapPath("~/DemoAppFiles/Input/HTML_Files/Page_Breaks_Inside_Avoid_Using_CSS.html"));
                baseUrlTextBox.Text = rootUrl + "DemoAppFiles/Input/HTML_Files/";

                urlTextBox.Text = rootUrl + "DemoAppFiles/Input/HTML_Files/Page_Breaks_Inside_Avoid_Using_CSS.html";

                sampleCodeLiteral.Text = System.IO.File.ReadAllText(Server.MapPath("~/DemoAppFiles/Input/Code_Samples/CSharp/AspNet/HTML_to_PDF/Page_Breaks/Avoid_Page_Breaks_in_CSS.html"));
                descriptionLiteral.Text = System.IO.File.ReadAllText(Server.MapPath("~/DemoAppFiles/Input/Descriptions/AspNet/HTML_to_PDF/Page_Breaks/Avoid_Page_Breaks_in_CSS.html"));

                Master.CollapseAll();
                Master.ExpandNode("HTML_to_PDF");
                Master.ExpandNode("Page_Breaks_Control");
                Master.SelectNode("Avoid_Page_Breaks_Inside_HTML_Elements_Using_CSS");
            }
        }

        protected void convertHtmlRadioButton_CheckedChanged(object sender, EventArgs e)
        {
            urlPanel.Visible = convertUrlRadioButton.Checked;
            htmlStringPanel.Visible = !convertUrlRadioButton.Checked;
        }

        protected void convertUrlRadioButton_CheckedChanged(object sender, EventArgs e)
        {
            urlPanel.Visible = convertUrlRadioButton.Checked;
            htmlStringPanel.Visible = !convertUrlRadioButton.Checked;
        }

        protected void demoMenu_MenuItemClick(object sender, MenuEventArgs e)
        {
            switch (e.Item.Value)
            {
                case "Live_Demo":
                    demoMultiView.SetActiveView(liveDemoView);
                    break;
                case "Description":
                    demoMultiView.SetActiveView(descriptionView);
                    break;
                case "Sample_Code":
                    demoMultiView.SetActiveView(sampleCodeView);
                    break;
                default:
                    break;
            }
        }

        protected void viewHtmlLinkButton_Click(object sender, EventArgs e)
        {
            Response.Redirect(urlTextBox.Text);
        }
    }
}

HTML with page-break-inside:avoid CSS Attribute

XML
<!DOCTYPE html>
<html>
<head>
    <title>Avoid Page Breaks Inside HTML Elements Using CSS</title>
</head>
<body style="margin: 0px; font-family: 'Times New Roman'; font-size: 14px">
    <table style="width: 1024px; font-family: 'Times New Roman'; font-size: 16px">
        <!-- The automaticaly repeated table header -->
        <!-- To disable the repeating of the header add style="display: table-row-group" to thead -->
        <thead>
            <tr>
                <td colspan="2">
                    <table style="border-bottom: 1px solid gray; width: 100%;">
                        <tr>
                            <td style="width: 200px">
                                <img alt="Logo Image" style="float: left; width: 200px" src="img/logo.jpg" />
                            </td>
                            <td style="text-align: right; font-size: 22px; font-weight: bold; color: navy">Repeated Table Header
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </thead>
        <tr style="page-break-inside: avoid">
            <td style="background-color: silver; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">1</td>
            <td style="background-color: whitesmoke; font-weight: normal; font-style: normal; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
                    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
                    vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
                    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: lightgray; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">2</td>
            <td style="font-weight: bold; font-style: normal; background-color: oldlace; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
                    placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit 
                    eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
                    Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
                    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum 
                    formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
                    nobis videntur parum clari, fiant sollemnes in futurum.
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: gainsboro; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">3</td>
            <td style="font-weight: normal; font-style: italic; background-color: azure; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
                    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
                    vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
                    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: whitesmoke; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">4</td>
            <td style="font-weight: bold; font-style: italic; background-color: beige; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
                    placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit 
                    eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
                    Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
                    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum 
                    formas humanitatis per seacula quarta decima et quinta decima   . Eodem modo typi, qui nunc 
                    nobis videntur parum clari, fiant sollemnes in futurum.
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: silver; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">5</td>
            <td style="background-color: whitesmoke; font-weight: normal; font-style: normal; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
                    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
                    vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
                    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: lightgray; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">6</td>
            <td style="font-weight: bold; font-style: normal; background-color: oldlace; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
                    placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit 
                    eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
                    Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
                    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum 
                    formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
                    nobis videntur parum clari, fiant sollemnes in futurum.
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: lightgray; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">46</td>
            <td style="font-weight: bold; font-style: normal; background-color: oldlace; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
                    placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit 
                    eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
                    Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
                    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum 
                    formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
                    nobis videntur parum clari, fiant sollemnes in futurum.
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: gainsboro; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">47</td>
            <td style="font-weight: normal; font-style: italic; background-color: azure; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
                    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
                    vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
                    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: whitesmoke; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">48</td>
            <td style="font-weight: bold; font-style: italic; background-color: beige; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
                    placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit 
                    eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
                    Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
                    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum 
                    formas humanitatis per seacula quarta decima et quinta decima   . Eodem modo typi, qui nunc 
                    nobis videntur parum clari, fiant sollemnes in futurum.
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: silver; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">49</td>
            <td style="background-color: whitesmoke; font-weight: normal; font-style: normal; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
                    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
                    vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
                    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
            </td>
        </tr>
        <tr style="page-break-inside: avoid">
            <td style="background-color: lightgray; font-weight: bold; font-size: 24px; width: 50px; text-align: center; vertical-align: middle">50</td>
            <td style="font-weight: bold; font-style: normal; background-color: oldlace; padding: 30px 10px 30px 10px">This row has the <b>'page-break-inside:avoid'</b> style to avoid page breaks inside it in PDF document.<br />
                <br />
                Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
                    placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit 
                    eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
                    Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
                    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum 
                    formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
                    nobis videntur parum clari, fiant sollemnes in futurum.
            </td>
        </tr>
        <!-- The automaticaly repeated table footer -->
        <!-- To disable the repeating of the footer add style="display: table-row-group" to tfoot -->
        <tfoot>
            <tr>
                <td colspan="2">
                    <table style="border-top: 1px solid gray; width: 100%;">
                        <tr>
                            <td style="font-size: 22px; font-weight: bold; color: green">Repeated Table Footer
                            </td>
                            <td style="width: 200px">
                                <img alt="Logo Image" style="float: right; width: 200px" src="img/logo.jpg" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>