CSS | page-break-inside Property

23 Jan, 2019
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 used to avoid 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;
Syntax:
page-break-inside: auto;
avoid: It avoids a page break inside the element.Syntax:page-break-inside: avoid;
page-break-inside: avoid;
initial: It sets the page-break-inside property to its default value.Syntax:page-break-inside: initial;
page-break-inside: initial;
inherits: The page-break-inside property is inherited from its parent.Syntax:page-break-inside: inherits;
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 use page-break-inside property value to avoid.
<!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>GeeksforGeeks</h1>          <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 = "https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"    alt = "" />          <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>                    
Output:Print Preview:
Example 2: This example use page-break-inside property value to none.
<!DOCTYPE html><html>      <head>    <title>        CSS page-break-inside property    </title>          <style type="text/css">        @media print {            ul {              page-break-inside: none;            }        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <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 = "https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"    alt = "" />          <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>                    
Output:Print Preview:
Supported Browsers: The browser supported by page-break-inside property are listed below:
Google Chrome 1.0
Internet Explorer 8.0
Firefox 19.0
Safari 1.3
Opera 7.0
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?