文本超出可用空间时CSS column-count属性失效问题咨询

这种需求是可以实现的，但纯CSS多列布局本身没法自动生成新的<div>容器来承载溢出内容。根据你要生成PDF的场景，分两种方案解决：

方案一：针对PDF导出的纯CSS分页方案 #

如果最终目的是生成PDF，直接利用CSS分页媒体属性（专门为打印/PDF场景设计），让内容自动在新页面上延续3列布局，不需要手动创建新容器。

修改后的代码： #

CSS

/* 定义PDF页面尺寸，模拟你的固定高度容器 */
@page {
  size: A4;
  margin: 20px;
}

.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-fill: auto;
  /* 去掉固定height，让页面自动分页 */
  position: relative;
  padding-top: 125px;
}

/* 把绝对定位的图表改成浮动，避免破坏分页流 */
.newspaper .figure {
  float: right;
  height: 100px;
  width: calc(66% - 10px);
  margin-left: 10px;
}

p {
  margin: 0;
  padding: 0;
  line-height: 25px;
  text-align: justify;
}

p:first-of-type {
  margin-top: -125px;
}

/* 避免段落被拆分到两页 */
p {
  page-break-inside: avoid;
}

HTML

<h2>This is such a nice headline!</h2>
<div class="newspaper">
  <div class="figure">
    <span style="text-align: left">Fig. 1: A black box</span>
    <svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1">
      <rect width="450" height="50" fill="black"></rect>
    </svg>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

说明： #

• 用@page定义PDF页面的尺寸和边距，替代固定height的容器，内容超出一页时会自动生成新页面，每页保持3列布局。
• 把原来绝对定位的图表改成浮动，避免脱离文档流导致分页异常。
• 用page-break-inside: avoid防止段落被拆分到两个页面，保持排版整洁。

方案二：网页端动态生成新容器的JS方案 #

如果需要在网页上展示这种“多页”效果（不是仅导出PDF），需要用JavaScript动态计算内容高度，把溢出的内容拆分到新的.newspaper容器中。

简单实现示例： #

function splitNewspaperContent() {
  const container = document.querySelector('.newspaper');
  const containerHeight = 525; // 你原来的固定高度
  const content = container.innerHTML;
  let currentContainer = container;
  
  // 循环检查内容是否溢出
  while (currentContainer.scrollHeight > containerHeight) {
    // 创建新的容器
    const newContainer = document.createElement('div');
    newContainer.className = 'newspaper';
    container.after(newContainer);
    
    // 逐步移除最后一个元素，直到当前容器不溢出
    let lastChild = currentContainer.lastElementChild;
    while (currentContainer.scrollHeight > containerHeight && lastChild) {
      newContainer.insertBefore(lastChild, newContainer.firstChild);
      lastChild = currentContainer.lastElementChild;
    }
    
    currentContainer = newContainer;
  }
}

// 页面加载完成后执行
window.addEventListener('load', splitNewspaperContent);

说明： #

• 这个函数会检查当前.newspaper容器的内容高度，如果超过固定高度，就把最后一个元素移到新创建的容器中，直到当前容器不再溢出。
• 注意：这种方法是简单实现，对于复杂排版（比如跨段落拆分）需要更精细的处理，比如拆分文本节点，但对于大多数场景足够用。

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