In trying to achieve what I have in mind here, it may be a challenge, but I'm putting it out there to see if anyone else might have a creative solution that eludes me.
My goal is to replicate the design of a government form. Essentially, I want to create a "continued" section where text that doesn't fit on the first page spills over onto the second page seamlessly.
Below is an example code snippet that accomplishes this using JavaScript. However, our rendering engine for HTML does not support JavaScript, especially for print layouts.
document.getElementById("content2").scrollTop = 150;#content1, #content2{
overflow: hidden;
width: 250px;
height: 150px;
border: 1px solid black;
padding: 5px;
}
#content2::after{
/*
* This is a spacer to ensure we can scroll to a value that has no content if the
* overflowed content does not fill box 2
*/
content: " ";
display: block;
height: 150px;
}<h1>Split up content</h1>
<h2>Here's the first box</h2>
<div id="content1">
<p>
This is some really long content.
</p>
<p>
My goal is for it to start in the first content block until the overflow is reached,
and then the overflowed content will automatically be displayed in the second box.
</p>
<p>
This is intended for use in a print layout, so I cannot rely on JavaScript.
</p>
</div>
<h2>And here's the second</h2>
<div id="content2">
<p>
This is some really long content.
</p>
<p>
My goal is for it to start in the first content block until the overflow is reached,
and then the overflowed content will automatically be displayed in the second box.
</p>
<p>
This is intended for use in a print layout, so I cannot rely on JavaScript.
</p>
</div>Is there a way to achieve the same result without using JavaScript? Another idea I had was to try splitting the content before inserting it into our HTML template, but predicting the break point accurately seems challenging without actual text layout.