如何使用HTML+CSS实现文字处理器式的面向列文本流效果

实现方案 #

仅用原生HTML/CSS完全可以实现你要的类文字处理器流动效果，核心是用CSS Grid布局配合**CSS Paged Media（分页媒体）**规则，完全不需要引入JavaScript。

原方案问题说明

• 你用flex布局的问题：flex本身仅支持单容器内的元素排列，没有原生的分页触发逻辑，同时你给p设的33%宽度没有考虑边距偏移，很容易出现容器溢出
• column-count的问题：该属性是列优先排列逻辑，和你需要的1→2→3→4→5行优先流动顺序不符，也不支持自定义分页

可用代码示例

/* 首先定义打印/导出的页面规则，完全匹配你的A7尺寸要求 */
@page {
  size: 74mm 105mm;
  margin: 10mm;
}
* {
  box-sizing: border-box; /* 避免边距、边框撑开元素尺寸 */
}
html {
  margin: 0;
  background-color: lightblue;
}
body {
  margin: 0;
  background-color: coral;
}
/* 单页容器 */
.din-a7 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每页默认3列，等分宽度 */
  gap: 8px; /* 列间距可自行调整 */
  width: 100%;
  min-height: calc(105mm - 20mm); /* 减去上下页边距的可用高度 */
  align-content: start;
}
/* 内容元素 */
.din-a7 p {
  margin: 0;
  break-inside: avoid; /* 禁止单个p元素被拆分到两栏/两页 */
}
/* 第二页单独设置2列，匹配你的示例效果 */
.din-a7.page-2 {
  grid-template-columns: repeat(2, 1fr);
}
/* 打印时自动分页 */
@media print {
  .din-a7 {
    break-after: page;
  }
}

<!-- 第一页 3列布局 -->
<div class="din-a7">
  <p>01 content</p>
  <p>02 content</p>
  <p>03 content</p>
  <!-- 第一页其他内容... -->
</div>
<!-- 第二页 2列布局 -->
<div class="din-a7 page-2">
  <p>04 content</p>
  <p>05 content</p>
  <!-- 第二页其他内容... -->
</div>

效果说明

1. Grid布局默认行优先排列，元素会按照第一行左→中→右→第二行左→中→右的顺序流动，完全匹配你给出的数字顺序要求
2. 打印或导出PDF时会自动按照你定义的A7尺寸、页边距分页，和常规文字处理器的打印效果完全一致
3. 如果需要在浏览器页面直接展示分页效果，只需给.din-a7加上固定高度和overflow: auto属性即可。

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