/* 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: unset; 

page-break-inside

Warning: This property has been replaced by the break-inside property.

The page-break-inside CSS property adjusts page breaks inside the current element.

/* 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: unset; 

Syntax

Values

Initial value. Automatic page breaks (neither forced nor forbidden).

Avoid page breaks inside the element.

Page break aliases

The page-break-inside property is now a legacy property, replaced by break-inside.

For compatibility reasons, page-break-inside should be treated by browsers as an alias of break-inside. This ensures that sites using page-break-inside continue to work as designed. A subset of values should be aliased as follows:

Formal definition

Formal syntax

auto | avoid

Examples

Avoiding page breaks inside elements

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

.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; } 

Specifications

See also