CSS page-break-inside Property

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. 

Output: 

Print Preview:

 👁 Image
 

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

Output: 

Print Preview:

 👁 Image
 

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