Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Titre du document</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> <div class="example"> <p>C'est le premier paragraphe.</p> <section class="list"> <span>Une liste</span> <ol> <li>une</li> </ol> </section> <ul> <li>une</li> </ul> <p>Le deuxième paragraphe.</p> <p>Le troisième paragraphe, qui comprend plus de texte.</p> <p>Le quatrième paragraphe. Il a un peu plus texte que le troisème.</p> </div> </body> </html>