CSS - page-break-inside



The page-break-inside property indicates whether page breaks should be allowed within an element's box.

The value of this property is not the sole factor in determining whether a page break should follow the element. This decision will also be affected by the values of page-break-before and page-break-after for any descendant elements.

Possible Values

  • avoid − No page break should be placed inside the element's box if at all possible.

  • auto − Page breaks should be neither forced nor prevented inside the element's box.

Applies to

All the block level elements.


Here is the example −

      <style type="text/css">
         .example {
            -webkit-columns: 150px;
            -moz-columns: 150px;
            columns: 150px;
            -webkit-column-gap: 2em;
            -moz-column-gap: 2em;
            column-gap: 2em;  
         body {
            font-size: 12px;
            font-family: 'Georgia', serif;
            font-weight: 400;
            line-height: 1.45;
            color: #333;
            background: #ecf0f1;
            padding: 1em;
         li {
            background: white;
            padding: 1em;
            margin-bottom: 1.3em;
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
      <ul class="example">
         <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
         <li>Mauris eu risus.</li>
         <li>Vestibulum auctor dapibus neque.</li>
         <li>Consectetuer adipiscing elit.</li>
         <li>Eu risus.</li>
         <li>Vestibulum auctor dapibus neque.</li> 
         <li>Lorem ipsum dolor sit amet</li>
         <li>Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
         <li>Vestibulum auctor dapibus neque.</li>
      <button onclick="myFunction()">Print this page</button>
         function myFunction() {

It will produce the following result −

For more detail please look into CSS Paged Media.