CSS Style pageBreakInside Property: CSS Page Break Inside

CSS page-break-inside Property: Controlling Page Breaks Within Elements

The CSS page-break-inside property is used to control whether or not a page break should occur inside an element when printing a document. This property is especially useful when you want to keep certain elements, such as tables or figures, from being split across multiple pages. By specifying how a page break should behave within an element, you can ensure that your printed documents are well-formatted and easy to read.

Purpose of the page-break-inside Property

The primary purpose of the page-break-inside property is to maintain the integrity of elements during printing. This is crucial for preventing awkward or confusing layouts where content is unnecessarily divided between pages. By using this property, you can:

• Prevent images, tables, or code blocks from being split across pages.
• Improve the readability and visual appeal of printed documents.
• Ensure that related content remains together on the same page.
• Avoid orphaned headings or isolated paragraphs at the end of a page.

Syntax and Values

The page-break-inside property accepts the following values:

page-break-inside: auto | avoid | avoid-page | initial | inherit;

Values Table

Practical Examples

Let’s explore how to use the page-break-inside property with practical examples. Each example includes the necessary HTML and CSS code to demonstrate the behavior of the property.

Example 1: Preventing Page Breaks Inside a <div>

In this example, we have a <div> element containing a block of text. We want to ensure that the entire <div> remains on the same page when printed.

<style>
  .no-break {
    page-break-inside: avoid;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<div class="no-break">
  This is a block of text that should not be split across multiple pages. It is
  important to keep this content together for readability. This is a block of
  text that should not be split across multiple pages. It is important to keep
  this content together for readability.
</div>

In this case, the CSS class .no-break is assigned the property page-break-inside: avoid;. This ensures that the content within the <div> element will stay together on one page, preventing it from being split awkwardly across two pages during printing.

Example 2: Using page-break-inside with a Table

Tables are common elements that often benefit from the page-break-inside property. Here, we ensure that a table is not split across pages.

<style>
  .table-no-break {
    page-break-inside: avoid;
    border-collapse: collapse;
    width: 100%;
  }

  .table-no-break th,
  .table-no-break td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
</style>

<table class="table-no-break">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
</table>

By applying page-break-inside: avoid; to the table, we ensure that the entire table structure remains intact on a single page, making it easier to read and understand.

Example 3: Combining page-break-inside with Other Page Break Properties

You can combine page-break-inside with other page break properties like page-break-before and page-break-after for more precise control.

<style>
  .section {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
  }

  .section h2 {
    page-break-before: always;
  }

  .section p {
    page-break-inside: avoid;
  }
</style>

<div class="section">
  <h2>Section 1</h2>
  <p>
    This is the first paragraph of Section 1. It should not be split across
    pages. This is the first paragraph of Section 1. It should not be split
    across pages.
  </p>
</div>

<div class="section">
  <h2>Section 2</h2>
  <p>
    This is the first paragraph of Section 2. It should not be split across
    pages. This is the first paragraph of Section 2. It should not be split
    across pages.
  </p>
</div>

In this example, each <h2> element will start on a new page (page-break-before: always;), and each paragraph within the section will not be split across pages (page-break-inside: avoid;).

Example 4: Using inherit Value

The inherit value allows an element to inherit the page-break-inside value from its parent.

<style>
  .parent {
    page-break-inside: avoid;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .child {
    page-break-inside: inherit;
    border: 1px dashed blue;
    padding: 5px;
    margin: 5px;
  }
</style>

<div class="parent">
  Parent Element
  <div class="child">Child Element - Inherited from Parent</div>
</div>

In this setup, the .child element inherits the page-break-inside: avoid; property from its .parent, ensuring that neither element is split across pages.

Real-World Applications

The page-break-inside property is particularly useful in:

• Generating Reports: Keeping tables, charts, and paragraphs intact.
• Printing Articles: Preventing text and images from splitting awkwardly.
• Creating Invoices: Ensuring that each invoice remains on a single page.
• Formatting Code Documentation: Keeping code blocks together for readability.

Tips and Best Practices

• Test Print Styles: Always test your print styles using the browser’s print preview to ensure the desired layout.
• Combine with Other Properties: Use page-break-inside in conjunction with page-break-before and page-break-after for comprehensive control.
• Avoid Overuse: Use sparingly to avoid creating documents with excessive blank pages.
• Consider Readability: Prioritize readability by ensuring that important content remains grouped together.

Browser Support

The page-break-inside property is supported by all major browsers, ensuring consistent behavior across different platforms.

Conclusion

The page-break-inside property is a valuable tool for controlling how page breaks behave within elements when printing documents. By using this property effectively, you can ensure that your printed content is well-formatted, easy to read, and visually appealing. Whether you’re generating reports, printing articles, or creating invoices, understanding and utilizing page-break-inside will help you achieve professional-looking printed results. 🖨️