HTML CSS examples for CSS Property:page-break-after
The page-break-after CSS property insert page breaks after an element when printing a document.
This properties applies to block-level elements.
The following table summarizes the page-break-after Property.
| Item | Value |
|---|---|
| Default value: | auto |
| Applies to: | Block-level elements |
| Inherited: | No |
| Animatable: | No. |
The syntax of the property is as follows:
page-break-after: auto | always | avoid | left | right | initial | inherit
The following table describes the values of this property.
| Value | Description |
|---|---|
| auto | Insert a page break after the element, if necessary. This is default value. |
| always | force a page break after the element. |
| avoid | Avoid a page break after the element. |
| left | Forces either one or two page breaks after the element, so that the next page will be a left-hand page. |
| right | Forces either one or two page breaks after 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-after property. |
The example below shows the page-break-after property.
<!DOCTYPE html> <html> <head> <title>Example of page-break-after property</title> <style type="text/css"> @media print{<!-- w w w.j a v a 2 s. c o m--> p.footnotes { page-break-after: always; text-align: center; } } </style> </head> <body> <h1>This is a heading</h1> <p>If you open the output in a new window and print (or print preview) the page, you will see there is always a page break after the footnotes.</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> <p class="footnotes">-: The End :-</p> <h1>This is another heading</h1> <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> <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> <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> <p class="footnotes">-: The End :-</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> <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> </body> </html>