How to Avoid a Page Break Immediately After a Heading

How do I avoid a page break immediately after a heading

Since the CSS property page-break-after: avoid doesn't work in any WebKit or Mozilla based browsers, use the page-break-inside: avoid over the heading and an acceptable amount of the text:

CSS

<style type="text/css">
    .nobreak {
        page-break-inside: avoid;
    }
</style>

HTML

<div class="nobreak">
    <h3>Heading!</h3>

    <p>Some things:</p>

</div>

    <ul>
      <li>Thing one</li>
      <li>Thing B</li>
      <li>Thing 4</li>
    </ul>

`page-break-after: avoid` when break occurs in margin

First (simple and safe) solution:
Add a section/div element around h1 and first paragraph and set on it a page-break-inside: avoid. In example:

    <body>
       <div class="headline">
          <h1>A sample title</h1>
          <p>First paragraph bla bla blac....</p>
       </div>
       <p>Second paragraph...</p>
    </body>

with CSS:

    .headline {
        page-break-inside: avoid;
    }

Second solution: with some little change on html, and semantic section can do something like:

  <body>
    <div class="page">
      <section>
        <h1>
          A Simple Title
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        ...
        <h1>Second title</h1>
        <p>Lorem....</p>
    </section>
  </body>

With CSS:

body {
  font: sans-serif;
}
.page {
  padding: 1em;
}
section {
  page-break-before: always;
}
section > p + h1 {
  page-break-before: always;
  page-break-after: avoid;
}
section > h1* + p {
  page-break-before: avoid;
}

You can see an example here: https://codesandbox.io/s/test-print-avoid-page-break-after-title-l4kbq

How to avoid page break during print preview in IE11?

The problem was the display style. I dont know why it was acting the way it was but i modified the css as below and now it working fine:

@media print {
.pagebreakbefore:first-child {
    display: inline !important;
    page-break-before: avoid !important;
}

.pagebreakbefore {
    page-break-before: always !important;
}
}

How to Avoid a Page Break Immediately After a Heading

How do I avoid a page break immediately after a heading

CSS

HTML

`page-break-after: avoid` when break occurs in margin

How to avoid page break during print preview in IE11?

Related Topics

Leave a reply