CSS page-break and break-inside properties example|W3Docs

Source Code: (back to article)

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 {

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>Page-break property example</h2>

<!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 {
        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>Page-break property example</h2>
    <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>