CSS pagebreakinside Property (original) (raw)

CSS page-break-inside Property

Last Updated : 9 Jun, 2023

The page-break-inside property in CSS is used to specify how the page breaks inside the element to which it is applied while printing. It inserts a page break or sometimes it is used to avoid a page break inside an element while printing.

Syntax:

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

Property Values:

• auto: It is the default value. This value represents the page break automatically.

Syntax:

page-break-inside: auto;

• avoid: It avoids a page break inside the element.

Syntax:

page-break-inside: avoid;

• initial: It sets the page-break-inside property to its default value.

Syntax:

page-break-inside: initial;

• inherits: The page-break-inside property is inherited from its parent.

Syntax:

page-break-inside: inherits;

Note: This property is mostly used to print a document.

Print Media Query:

@media print { img { display: block; page-break-inside: avoid; } }

Example 1: This example uses page-break-inside property value to avoid.

html `

<style type="text/css">
    @media print {
        ul {
            page-break-inside: avoid;
        }
    }
</style>

GeeksforGeeks

<h2>CSS page-break-inside property</h2>

<br><br><br>

<img src=

"" title="undefined" rel="noopener noreferrer">https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"/>

<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=

"" title="undefined" rel="noopener noreferrer">https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"/>

<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>

`

Output:

Print Preview:

Example 2: This example use page-break-inside property value to none.

html `

<style type="text/css">
    @media print {
        ul {
            page-break-inside: none;
        }
    }
</style>

GeeksforGeeks

<h2>CSS page-break-inside property</h2>

<br><br><br>

<img src=

"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" alt="" />

<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=

"" title="undefined" rel="noopener noreferrer">https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"/>

<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>

`

Output:

Print Preview:

Supported Browsers: The browser supported by page-break-inside property are listed below:

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