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.
Example
Here is the example −
<html> <head> <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; } </style> </head> <body> <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> </ul> <button onclick = "myFunction()">Print this page</button> <script> function myFunction() { window.print(); } </script> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google