Show Output
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example of page-break-inside property</title> <style> @media print{ 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>
