Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> .example{ background-color: #8ebf42; height: 90px; width: 200px; columns: 1; column-width: 80px; } .list, ol, ul, p { break-inside: avoid; } 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> <h2>Beispiel für die Eigenschaft page-break</h2> <div class="example"> <p>Der erste Absatz.</p> <section class="list"> <span>Liste A</span> <ol> <li>one</li> </ol> </section> <ul> <li>one</li> </ul> <p>Der zweite Absatz.</p> <p>Der dritte Absatz mit längerem Text.</p> <p>Der vierte Absatz. Es hat ein wenig mehr Text als der dritte.</p> </div> </body> </html>