使用CSS两列属性时如何让溢出文本自动续排到其他div

核心结论 #

仅靠原生CSS无法实现将溢出内容自动填充到你预先定义好的独立.page div中的效果。
CSS的多列布局（也就是你现在在用的column-count方案）只能在单个容器内部拆分列，不具备跨独立DOM节点分发内容的能力——CSS只负责节点的样式渲染，不会改动DOM结构、也不会把一个容器里的内容自动转移到另一个不相关的DOM节点里。

可落地的实现路径 #

根据你的杂志类项目需求，有两种成熟方案可以选： #

方案1：纯CSS实现自动分页（适合打印/导出类场景，无需额外JS） #

如果你不需要每个页面都是独立存在的DOM节点，只是要实现视觉上的A4尺寸分页、两列排版，完全可以用CSS原生的分页媒体属性实现，不需要手动拆分内容：

/* 保留你原有的两列样式，新增A4尺寸和分页规则 */
.twocolumns {
  width: 210mm; /* A4标准宽度 */
  min-height: 297mm; /* A4标准高度 */
  padding: 20mm; /* 自定义页边距 */
  margin: 0 auto 8mm auto; /* 屏幕上显示时每页的间距 */
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
  page-break-after: always; /* 每页结束后强制分页 */
}

/* 打印场景下重置多余样式，适配打印规则 */
@media print {
  html, body {
    width: 210mm;
    margin: 0;
    padding: 0;
  }
  .twocolumns {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
  }
}

这个方案的特点是：你只需要把所有杂志内容放到第一个加了twocolumns类的容器里，浏览器在渲染、打印导出的时候会自动按照A4尺寸切割内容，溢出的部分会自动顺延到后续的分页页面里，两列排版规则也会在每个分页里自动生效。缺点是这些自动生成的分页不是真实的DOM节点，没法单独给某一页加独立的页眉、页脚、页码或者交互效果。 #

方案2：CSS+少量JS实现真实DOM节点分页（适合需要自定义单页内容的场景） #

如果你要求每个页面都是真实存在的、带page标识的div节点（比如要给每页加单独的页码、页眉广告、交互控件），就必须配合少量JS做内容切分，核心逻辑是逐块往当前页填充内容，检测到内容溢出当前页高度时，就把溢出的内容切到下一个.page容器里，直到所有内容填充完成。
核心实现代码参考：

// 单页内容最大高度：96dpi下A4高度297mm减去上下20mm边距，对应像素值约为982px，可根据你的实际样式调整
const SINGLE_PAGE_MAX_HEIGHT = 982;
const allContent = Array.from(document.querySelector('#raw-content').childNodes); // 你的原始杂志内容
let currentPage = document.createElement('div');
currentPage.className = 'page twocolumns';
document.body.appendChild(currentPage);

while (allContent.length > 0) {
  const currentNode = allContent[0];
  currentPage.appendChild(currentNode);
  // 检测当前页是否溢出
  if (currentPage.scrollHeight > SINGLE_PAGE_MAX_HEIGHT) {
    // 溢出了就把刚加的节点移到新页面
    currentPage.removeChild(currentNode);
    currentPage = document.createElement('div');
    currentPage.className = 'page twocolumns';
    document.body.appendChild(currentPage);
  } else {
    // 没溢出就处理下一个节点
    allContent.shift();
  }
}

注意如果内容里包含图片、视频这类异步加载的资源，要等所有资源加载完成后再执行上面的填充逻辑，否则高度计算会有误差。

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