page-break-inside - HTML CSS CSS Property

HTML CSS examples for CSS Property:page-break-inside

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. page-break-inside

Description

The page-break-inside CSS property force a printing page break inside an element.

This properties applies to block-level elements.

The following table summarizes the page-break-inside Property.

Item Value
Default value: auto
Applies to:Block-level elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


page-break-inside:      auto | avoid | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
autoInsert a page break inside the element, if necessary. This is default value.
avoid Avoid a page break inside the element.
initial Sets this property to its default value.
inherit take the value of its parent element page-break-inside property.

The example below shows the page-break-inside property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <title>Example of page-break-inside property</title>
  <style type="text/css">
    @media print{<!--from   ww w .j ava 2s  . c  o m-->
        ul {
          page-break-inside: avoid;
        }
    }
</style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p><strong>Note:</strong> If you open the output in a new window and print (or print preview) the page, you will see unordered list doesn't splitting over two pages even if there is plenty of space on the bottom of first page to accommodate some list element.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas lacinia dolor vel semper. Curabitur auctor pulvinar erat, et sollicitudin augue cursus ut. Fusce eget erat at sem fermentum mattis porta id dui. Donec accumsan ligula sit amet diam ultrices iaculis sagittis felis vulputate. Vestibulum eget magna ut libero adipiscing congue vel quis quam. In dui dolor, placerat imperdiet molestie ut, tristique a dui. Duis consectetur nunc id lectus interdum imperdiet. Sed sit amet nulla tempus erat suscipit dictum. Morbi vitae fringilla sapien. Morbi ac leo quis nisl volutpat rhoncus. Donec adipiscing neque ut lectus congue imperdiet sit amet sed mauris.</p>
  <p>Proin lectus lacus, feugiat sed pharetra molestie, iaculis nec leo. Integer vulputate scelerisque dui, vel tincidunt purus pharetra nec. Donec quis sapien nisl. Ut interdum lobortis tempus. Aenean dictum suscipit risus. Aliquam ac consequat neque. Suspendisse et sapien ac leo vestibulum ornare. Mauris mattis cursus nibh, euismod vestibulum ipsum lobortis sit amet. Sed sagittis tellus ac tellus suscipit commodo. Integer molestie, orci id gravida mollis, ante lectus bibendum enim, dictum fermentum ipsum arcu et tellus.</p>
  <p>Aliquam vel ligula turpis, in faucibus nulla. Nunc auctor ornare sem. Cras odio dui, dictum eget pharetra ut, volutpat nec turpis. In nisl risus, venenatis varius pulvinar id, blandit vitae sem. Donec viverra sapien mi, eget porta arcu. Nullam scelerisque ultrices convallis. In sed est nec justo ultrices tempor. Pellentesque sem felis, faucibus non elementum non, feugiat et risus. Etiam elementum sem ac tellus consequat tempus. Nunc nunc odio, gravida a fermentum nec, eleifend eget lectus. Etiam at nulla dolor. Nunc risus erat, commodo sit amet vulputate at, interdum et diam.</p>
  <p>Morbi tempor vulputate massa a pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis augue, molestie sit amet egestas non, feugiat ac arcu. Duis orci elit, adipiscing porttitor euismod et, sodales sodales enim. Fusce venenatis bibendum venenatis. Nulla bibendum turpis in dui imperdiet tincidunt. Sed quam urna, vulputate ac venenatis at, luctus sit amet urna. Fusce pellentesque accumsan augue vitae adipiscing. In felis nibh, viverra eget pellentesque a, ultricies et dui. Phasellus consectetur volutpat ullamcorper. Curabitur a sagittis turpis. Sed congue mollis purus, luctus tempus est consectetur nec.</p>
  <p>Proin lectus lacus, feugiat sed pharetra molestie, iaculis nec leo. Integer vulputate scelerisque dui, vel tincidunt purus pharetra nec. Donec quis sapien nisl. Ut interdum lobortis tempus. Aenean dictum suscipit risus. Aliquam ac consequat neque. Suspendisse et sapien ac leo vestibulum ornare. Mauris mattis cursus nibh, euismod vestibulum ipsum lobortis sit amet. Sed sagittis tellus ac tellus suscipit commodo. Integer molestie, orci id gravida mollis, ante lectus bibendum enim.</p>
  <ul>
   <li>Quisque in mauris vitae lectus.</li>
   <li>Integer porttitor, lorem et dignissim sagittis.</li>
   <li>Suspendisse eu nisi sit amet ligula vehicula laoreet.</li>
   <li>Aenean et mi eget ipsum vestibulum vestibulum</li>
   <li>Cras odio dui, dictum eget pharetra ut, volutpat nec turpis.</li>
   <li>Aliquam vel ligula turpis, in faucibus nulla. Nunc auctor ornare sem.</li>
   <li>Etiam elementum sem ac tellus consequat tempus.</li>
   <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
   <li>Cras felis augue, molestie sit amet egestas non, feugiat ac arcu.</li>
   <li>Vivamus sodales suscipit pulvinar. Praesent id lorem libero, ac suscipit dui.</li>
   <li>Morbi tempor vulputate massa a pretium.</li>
   <li>Duis orci elit, adipiscing porttitor euismod et, sodales sodales enim.</li>
   <li>Phasellus consectetur volutpat ullamcorper.</li>
   <li>Praesent id lorem libero, ac suscipit dui. Curabitur auctor, erat ac vehicula posuere.</li>
   <li>Integer vulputate scelerisque dui, vel tincidunt purus pharetra nec.</li>
   <li>Sed sagittis tellus ac tellus suscipit commodo. Integer molestie, orci id gravida mollis.</li>
   <li>Curabitur auctor pulvinar erat, et sollicitudin augue cursus ut.</li>
  </ul>
 </body>
</html>

Related Tutorials