title: Single-page display, multi-page print problem
body: <p>A web page displays the following:-</p>
  
  <ul>
  <li>Bob</li>
  <li>Fred</li>
  <li>John</li>
  </ul>
  
  <p>However when the user (that would be me) prints the web page I want multiple repeats of this output with slight variations to be printed on separate pages :-</p>
  
  <ul>
  <li><strong>Bob</strong></li>
  <li>Fred</li>
  <li>John</li>
  </ul>
  
  <p><code>&gt;page break here&lt;</code></p>
  
  <ul>
  <li>Bob</li>
  <li><strong>Fred</strong></li>
  <li>John</li>
  </ul>
  
  <p><code>&gt;page break here&lt;</code></p>
  
  <ul>
  <li>Bob</li>
  <li>Fred</li>
  <li><strong>John</strong></li>
  </ul>
  
  <p>In reality the page content is larger (although well within a standard A4 page worth) and the number of output pages is about 20.  I'd prefer an elegant cross-browser solution but ultimately a solution that works on Internet Explorer 7 is acceptable.</p>
  
  <p>I'm using ASP.NET MVC with jQuery (although a straight JavaScript solution is fine).</p>
  
  <p><strong>Edit:</strong>  Page-Break-XXX css style is going be part of the answer, but I'm particularly interested in a means to dynamically create the print version HTML from the screen version.  Note I don't want to navigate to a 'printer friendly' page and then print that.  I just want to hit the browsers print button and magic happens.</p>