Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .example { background-color: #8ebf42; height: 90px; width: 200px; columns: 1; column-width: 80px; } .list, ol, ul, p { page-break-inside: auto; } @media print { .list, ol, ul, p { page-break-inside: auto; } } p { background-color: #8ebf42; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: #1c87c9; } p:first-child { margin-top: 1; } </style> </head> <body> <div class="example"> <p>The first paragraph.</p> <section class="list"> <span>A list</span> <ol> <li>one</li> </ol> </section> <ul> <li>one</li> </ul> <p>The second paragraph.</p> <p>The third paragraph, it contains more text.</p> <p>The fourth paragraph. It has a little bit more text than the third one.</p> </div> </body> </html>