title: Format repeating header for columns
body: <p>I want to generate a html and CSS for print.</p>
  
  <p>I want kind of this result:</p>
  
  <p><a href="https://i.stack.imgur.com/5VFOT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5VFOT.png" alt="enter image description here"></a></p>
  
  <p>What are the requirements?</p>
  
  <ol>
  <li>The text which overflows at the bottom of box 1 should continue in box 2</li>
  <li>Before the text in box 2 continues i want to add an element. In this case Heading should be added</li>
  <li>The text is has an variable size. The text is fetched from a database and varies in size and styling. So I can't predict were the element should start in the box 2</li>
  <li>Over these 2 boxes are other elements which reduce the size of these boxes even further</li>
  <li>The printed pagesize is A4</li>
  </ol>
  
  <p><strong>What I tried:</strong></p>
  
  <p>I tried this with <code>columns:2</code> property in css, but I can't detect when the column ends and starts a new one(as far as I know). </p>
  
  <p>I used the pseudeselector <code>:before</code> to add content to this div.
  I would like some selector like <code>column:beforeColumnBreak</code>. I know this selector doesn't exist, but I hope it brings the idea accross.</p>
  
  <p>I tried Bootstrap with rows and columns. </p>
  
  <p>Has someone experienced solutions with print? Is there maybe a JS-libary which can help me with this problem?</p>
  
  #####EDIT 1
  
  <p>The Problem is due to the fact that web doesn't know any pages.</p>
  
  <p>NEW PAGE is when a new A4 side starts. So when the text overflows.
  The text should continue like this 1 -> 2 -> 3 -> 4
  In each box should the heading element be present.</p>
  
  <p><a href="https://i.stack.imgur.com/P4z3T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P4z3T.png" alt="enter image description here"></a></p>