无需JavaScript实现内容溢出至指定区块的布局方案求助

问题背景 #

需要模仿政府表单布局，实现内容续接功能：第一页主文本区溢出的内容自动显示在第二页的对应位置。现有依赖JavaScript的方案因打印引擎不支持JS无法使用，寻求纯CSS或非JS替代方案。

原依赖JS的示例代码 #

JavaScript

document.getElementById("content2").scrollTop = 150;

CSS

#content1, #content2{
      overflow: hidden;
      width: 250px;
      height: 150px;
      border: 1px solid black;
      padding: 5px;
  }
  #content2::after{
      /* 占位符确保内容不足时可滚动到空区域 */
      content: " ";
      display: block;
      height: 150px;
  }

HTML

<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>

可行的非JavaScript解决方案 #

1. CSS Regions（内容流动容器） #

CSS Regions允许将同一内容流分配到多个容器中，完美匹配跨区块续接需求。需确认打印引擎对CSS Regions的支持度（现代引擎大多支持）。

示例代码

/* 定义内容流名称 */
.content-source {
  flow-into: form-content;
}

/* 第一页显示容器 */
#content1 {
  flow-from: form-content;
  width: 250px;
  height: 150px;
  border: 1px solid black;
  padding: 5px;
}

/* 第二页续接容器 */
#content2 {
  flow-from: form-content;
  width: 250px;
  height: 150px;
  border: 1px solid black;
  padding: 5px;
  margin-top: 20px;
}

<h1>Split up content</h1>
<h2>Here's the first box</h2>
<!-- 唯一的内容源，无需重复内容 -->
<div class="content-source">
    <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>
    <p>Additional test content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>More text to trigger overflow: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- 第一页显示容器 -->
<div id="content1"></div>

<!-- 强制分页（打印时生效） -->
<div style="page-break-before: always;"></div>

<h2>And here's the second</h2>
<!-- 第二页续接容器 -->
<div id="content2"></div>

2. CSS Paged Media（打印专用布局） #

针对打印场景，使用@page规则控制分页行为，让内容自然跨页续接，同时保持区块样式一致。

示例代码

/* 定义打印页面尺寸和边距 */
@page {
  size: letter;
  margin: 1in;
}

/* 第一页顶部标题 */
@page :first {
  @top-center {
    content: "Split up content";
    font-size: 1.5em;
    font-weight: bold;
  }
}

/* 后续页面顶部标题（标注续接） */
@page :right {
  @top-center {
    content: "Split up content (Continuation)";
    font-size: 1.5em;
    font-weight: bold;
  }
  @top-right {
    content: "Page " counter(page);
  }
}

/* 内容区块样式，匹配原需求的尺寸 */
.form-block {
  width: 250px;
  min-height: 150px;
  border: 1px solid black;
  padding: 5px;
  margin: 2em 0;
}

/* 避免段落在区块中间被拆分（可选） */
.form-block p {
  break-inside: avoid;
}

<!-- 第一页内容区块 -->
<div class="form-block">
    <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>
    <p>Additional test content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>More text to trigger overflow: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

打印时，内容会自动在第一页的区块内显示，溢出部分会续接到第二页，且第二页会自动应用续接标题样式。

3. 服务器端预拆分内容（备选） #

如果CSS方案兼容性不足，可在服务器端使用支持排版计算的工具（如WeasyPrint、Puppeteer）提前计算内容断点，将内容拆分为适配两个区块的部分后再插入HTML模板。此方法能精准控制断点，但需要额外的后端处理逻辑。

内容的提问来源于stack exchange，提问作者DMJ