How do I avoid a page break immediately after a heading

by

This is an extremely hacky solution, but it works for me:

h1 {
    page-break-inside: avoid;
}
h1::after {
    content: "";
    display: block;
    height: 100px;
    margin-bottom: -100px;
}

Basically I create an invisible element that increases the size of the <h1> without affecting the content after it. When page-break-inside: avoid is applied and the whole <h1> (including the hacky element cannot fit into the page) the browser is forced to carry the <h1> to the next page.

More Related Contents:

  1. How to apply CSS page-break to print a table with lots of rows?
  2. How to make double border on left only with thick outside and thin inside [duplicate]
  3. Centering in CSS Grid
  4. How to style the parent element when hovering a child element?
  5. Styling text input caret
  6. How to make this arrow in CSS only?
  7. Can specific text character change the line height?
  8. Make Iframe to fit 100% of container’s remaining height
  9. Bootstrap 3 two columns full height
  10. Why does IE9 switch to compatibility mode on my website?
  11. CSS media queries for screen sizes
  12. What is syntax for selector in CSS for next element?
  13. How to make div occupy remaining height?
  14. 7 equal columns in bootstrap
  15. Table scroll with HTML and CSS [duplicate]
  16. How to center the contents of an HTML table?
  17. Make a nav bar stick
  18. How to hide Table Row Overflow?
  19. Bootstrap print CSS removes background color
  20. How to prevent Chrome from changing font when autofilling username/password?
  21. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  22. Label text is wrapped but not indent second line
  23. Make content horizontally scroll inside a div
  24. HTML5 Required input styling
  25. CSS overflow hidden with absolute position
  26. Why is ‘font-family’ not inherited in ” tags automatically?
  27. Does the id attribute of an HTML element have to be unique in the whole page?
  28. Right align text within Bootstrap 4 breadcrumbs
  29. Aligning to the bottom in flexbox
  30. Complete list of reasons why a css file might not be working

Leave a Comment