Understanding CSS page-break-inside for Printed Content

Learn how to use the CSS page-break-inside property to control page breaks within elements for printed content.

Explore available options like 'auto' and 'avoid' to enhance readability.

Introduction

The page-break-inside CSS property controls page breaks within elements during printing. Though deprecated and replaced by the [break-inside]WebsiteUrl property, many browsers still support it for compatibility. This article explains page-break-inside in detail, including syntax, values, and practical examples.

Description

The page-break-inside CSS property controls page breaks within elements during printing. This helps keep related content together on a single page, improving readability. Although replaced by [break-inside]WebsiteUrl, understanding page-break-inside is useful for maintaining older websites and ensuring compatibility.

Syntax

/* Keyword values */
page-break-inside: auto;
page-break-inside: avoid;

/* Global values */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: revert-layer;
page-break-inside: unset;

Keyword Values

auto: Allows automatic page breaks inside the element.
avoid: Prevents page breaks inside the element, keeping the content together on a single page if possible.

Global Values

inherit: Inherits the page-break-inside value from the parent element.
initial: Resets the property to its default value, auto.
revert: Resets the property to its inherited value if it inherits, or to the user agent’s default otherwise.
revert-layer: Resets the property to its inherited value from a user-agent stylesheet.
unset: Acts as inherit if the property is inherited, or as initial if not.

Page Break Aliases

The page-break-inside property is treated as an alias of break-inside for compatibility:

`page-break-inside` Value	`break-inside` Value
`auto`	`auto`
`avoid`	`avoid`

Formal Definition

The page-break-inside property controls page breaks within block-level elements in the normal flow of the root element.

Property	`page-break-inside`
Initial Value	`auto`
Applies To	Block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements.
Inherited	No
Computed Value	As specified
Animation Type	Discrete

Formal Syntax

page-break-inside = avoid | auto | inherit

Examples

HTML

<div class="page">
  <p>This is the first paragraph.</p>
  <section class="list">
    <span>A list</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph, it contains more text.</p>
  <p>
    This is the fourth paragraph. It has a little bit more text than the third one.
  </p>
</div>

CSS

.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}

Result

The break-inside: avoid; property ensures that elements (.list, ol, ul, and p) are not split across page breaks when printed, keeping related content together.

Avoiding Page Breaks Inside Elements

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS page-break-inside property</title>
  <style type="text/css">
    @media print {
      ul {
        page-break-inside: avoid;
      }
    }
  </style>
</head>
<body>
  <h1>Website</h1>
  <h2>CSS page-break-inside property</h2>
  <br><br><br>
  <img src="WebsiteUrl/wp-content/uploads/Website-logo.png" alt="Website Logo"/>
  <br><br><br><br>
  <p>
    Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful.
  </p>
  <br><br><br>
  <img src="WebsiteUrl/wp-content/uploads/interview-preparation-2.png" alt="Interview Preparation"/>
  <ul>
    <li>Data Structure</li>
    <li>Algorithms</li>
    <li>C Programming</li>
    <li>C++ Programming</li>
    <li>Java Programming</li>
    <li>Python Programming</li>
    <li>PHP Programming</li>
    <li>Operating System</li>
    <li>Computer Networks</li>
    <li>DBMS</li>
    <li>SQL</li>
    <li>TOC</li>
  </ul>
</body>
</html>

CSS

@media print {
  ul {
    page-break-inside: avoid;
  }
}

Output

When this page is printed, the ul list elements will not be split across pages, ensuring the list appears as a single, coherent block of content.

Avoiding Page Breaks with `none`

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS page-break-inside property</title>
  <style type="text/css">
    @media print {
      ul {
        page-break-inside: avoid;
      }
    }
  </style>
</head>
<body>
  <h1>Website</h1>
  <h2>CSS page-break-inside property</h2>
  <br><br><br>
  <img src="WebsiteUrl/wp-content/uploads/Website-logo.png" alt="Website Logo"/>
  <br><br><br><br>
  <p>
    Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful.
  </p>
  <br><br><br>
  <img src="WebsiteUrl/wp-content/uploads/interview-preparation-2.png" alt="Interview Preparation"/>
  <ul>
    <li>Data Structure</li>
    <li>Algorithms</li>
    <li>C Programming</li>
    <li>C++ Programming</li>
    <li>Java Programming</li>
    <li>Python Programming</li>
    <li>PHP Programming</li>
    <li>Operating System</li>
    <li>Computer Networks</li>
    <li>DBMS</li>
    <li>SQL</li>
    <li>TOC</li>
  </ul>
</body>
</html>

CSS

@media print {
  ul {
    page-break-inside: avoid;
  }
}

Output

When this page is printed, the ul list elements will not be split across pages, ensuring the list appears as a single, coherent block of content.

Specifications

The page-break-inside property is defined in the CSS Paged Media Module Level 3 specification. This module provides rules for controlling the layout of content when printing web pages. You can find the details in the [CSS Paged Media Module Level 3]WebsiteUrl.

Browser Compatibility

The page-break-inside property is supported by a wide range of browsers, including:

Google Chrome 1.0
Edge 12.0
Internet Explorer 8.0
Firefox 19.0
Safari 1.3
Opera 7.0

Tips for Ensuring Compatibility

Test Across Browsers: Always test your web pages across different browsers to ensure that the page-break-inside property is working as expected.
Use Polyfills: If you need to support very old browsers that do not support the page-break-inside property, consider using polyfills to mimic the behavior.
Fallback Solutions: Provide fallback solutions for browsers that do not support the property, ensuring that the content remains readable even if the property is not applied.

[break-before]WebsiteUrl: Controls where page, column, or region breaks occur before an element.
[break-after]WebsiteUrl: Controls where page, column, or region breaks occur after an element.
[break-inside]WebsiteUrl: Controls how page, column, or region breaks occur inside an element.
[page-break-after]WebsiteUrl: Inserts page breaks after an element.
[page-break-before]WebsiteUrl: Inserts page breaks before an element.
[orphans]WebsiteUrl: Specifies the minimum number of lines of a block container that must be left at the bottom of a page.
[widows]WebsiteUrl: Specifies the minimum number of lines of a block container that must be left at the top of a page.
[HTML Reference Guide]WebsiteUrl: A comprehensive guide to HTML, including detailed explanations of various elements and attributes.