page-break-before - HTML CSS CSS Property

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

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

Description

The page-break-before CSS property adds page breaks before an element when printing.

This properties works on block-level elements.

The following table summarizes the page-break-before 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-before:     auto | always | avoid | left | right | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
autoInsert a page break before the element, if necessary. This is default value.
always Always force a page break before the element.
avoid Avoid a page break before the element.
leftForces either one or two page breaks before the element, so that the next page will be a left-hand page.
right Forces either one or two page breaks before the element, so that the next page will be a right-hand page.
initial Sets this property to its default value.
inherit take the value of its parent element page-break-before property.

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <title>Example of page-break-before property</title>
  <style type="text/css">
    @media print{<!-- ww  w .j av  a 2  s . c o  m-->
        h1 {
          page-break-before: always;
        }
    }
</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 heading is always appear on the top of the page. However the first page becomes blank as there is a page break before the &amp;lt;h1&amp;gt; elements.</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. Suspendisse orci urna, vestibulum eget lacinia quis, varius vitae nibh.</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>
  <h1>This is another heading</h1>
  <p>If you open the output in a new window and print (or print preview) the page, you will see heading is always appear on the top of the page. However the first page becomes blank as there is a page break before the &lt;h1&gt; elements.</p>
  <p>Quisque in mauris vitae lectus ullamcorper tincidunt sed quis sapien. Integer porttitor, lorem et dignissim sagittis, elit sem pellentesque arcu, vitae volutpat ipsum augue ut odio. Morbi libero risus, interdum sit amet imperdiet sit amet, viverra in magna. Aenean sit amet justo eget magna dictum laoreet. Curabitur nec lacus lorem. Aenean et mi eget ipsum vestibulum vestibulum at malesuada dui. Suspendisse eu nisi sit amet ligula vehicula laoreet. Etiam tincidunt pretium placerat. Aenean venenatis egestas elit, quis ultrices eros auctor eu. Mauris iaculis, justo id ornare porttitor, nunc velit imperdiet massa, vitae sollicitudin tortor turpis id ipsum. In metus tortor, eleifend a faucibus a, condimentum in nunc. Ut vitae nisl tortor, vel dignissim tortor. Donec sapien libero, cursus at commodo vel, rutrum et augue. Mauris hendrerit lacus et neque aliquam commodo.</p>
  <h1>This is another heading</h1>
  <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. Vivamus sodales suscipit pulvinar. Praesent id lorem libero, ac suscipit dui. Curabitur auctor, erat ac vehicula posuere, felis risus viverra ipsum, nec volutpat velit est eu diam.</p>
  <h1>This is another heading</h1>

 </body>
</html>

Related Tutorials