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

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

auto

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

avoid

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:

page-break-inside	break-inside
auto	auto
avoid	avoid

Formal definition

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

auto | avoid

Examples

Avoiding page breaks inside elements

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

Specifications

Specification
Proposals for the future of CSS Paged Media # page-break-inside

See also

break-before, break-after, break-inside page-break-after, page-break-before orphans, widows Select your preferred language English (US)DeutschFrançais日本語中文 (简体) Change language