如何用HTML和CSS实现多栏PDF式的文本流式排版？

不用JavaScript拆分内容，仅靠HTML和CSS就能实现你要的效果，核心是结合CSS多栏布局的column-height属性（或容器高度）控制栏高，内容超出后自动生成新的栏行，同时天然支持窗口resize时的动态重排。

具体实现方式 #

• 给容器设置columns定义每行的列数，再用column-height指定单栏的固定高度，内容超出这个高度后会自动流入下一组栏（类似PDF的新“页”）。
• 示例代码：

.pdf-like-columns {
  columns: 2; /* 每行显示2列 */
  column-height: 700px; /* 单栏固定高度，模拟PDF页面高度 */
  column-gap: 3rem; /* 列之间的间距 */
  margin: 0 auto;
  max-width: 1200px;
  padding: 2rem;
}

/* 优化阅读体验：避免段落、标题在栏中间被截断 */
.pdf-like-columns > h2,
.pdf-like-columns > p {
  break-inside: avoid;
}

HTML结构只需把所有文本内容放在容器里即可，无需手动拆分：

<div class="pdf-like-columns">
  <h2>标题1</h2>
  <p>这里是大段文本内容...</p>
  <h2>标题2</h2>
  <p>更多文本内容...</p>
  <!-- 所有内容都放在这个容器里 -->
</div>

关键特性说明 #

• 自动流式布局：内容会先填满第一组的所有列，超出容器高度后自动生成新的栏行，完全模拟PDF的分页流式效果。
• 窗口resize适配：浏览器窗口大小变化时，CSS会自动重新计算列宽和布局，内容实时重排，不需要额外JS逻辑。
• 兼容性：主流浏览器（Chrome、Firefox、Edge）都支持标准的column-height属性，无需前缀；如果要兼容更老的浏览器，可以用容器的height属性替代，效果基本一致。

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