如何在wkhtmltopdf中实现Bootstrap4元素超100rem时内容转至下一列

针对你在Bootstrap 4环境下需要将高度超100rem的富文本内容自动流转到下一列，且要兼容wkhtmltopdf转PDF的需求，以下是两种可行方案，替代之前出现渲染异常的-webkit-columns方案：

方案1：CSS Grid模拟分栏（优先推荐） #

wkhtmltopdf对CSS Grid的支持比原生多列布局更稳定，我们可以用Grid实现两列等高限制，超出内容自动流转：

核心样式代码 #

/* 替换原col-6的外层容器，或直接修改col-6的样式 */
.content-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽，匹配Bootstrap col-6的布局 */
  max-height: 100rem; /* 总高度限制，超过后内容自动换行到下一列 */
  overflow: hidden;
}

/* 富文本内容容器，保留Bootstrap列的内边距 */
.content-wrap .rich-text {
  padding: 0 15px;
  break-inside: avoid; /* 防止块级元素被拆分到两列 */
}

wkhtmltopdf命令参数优化 #

添加以下参数确保Grid布局正常渲染：

wkhtmltopdf --enable-css-media-type --disable-smart-shrinking input.html output.pdf

方案2：JS辅助+分页属性（兼容旧版wkhtmltopdf） #

如果你的wkhtmltopdf版本较旧，Grid支持不佳，可以用JS计算内容高度，结合分页属性实现分栏：

样式代码 #

.first-col {
  height: 100rem;
  overflow: hidden;
  page-break-after: always; /* 第一列结束后强制分页 */
}

.second-col {
  page-break-before: always;
  margin-top: -100rem; /* 模拟和第一列同位置的视觉效果 */
}

.rich-text {
  break-inside: avoid;
}

JS辅助代码（拆分内容） #

const firstColContent = document.querySelector('.first-col .rich-text');
const secondColContent = document.querySelector('.second-col .rich-text');
const maxHeight = parseInt(getComputedStyle(firstColContent.parentElement).height);

// 循环将超出高度的内容移到第二列
while (firstColContent.scrollHeight > maxHeight) {
  const lastNode = firstColContent.lastElementChild;
  if (lastNode) {
    secondColContent.insertBefore(lastNode, secondColContent.firstChild);
  } else {
    // 处理纯文本场景
    const text = firstColContent.textContent;
    const splitPos = text.length - 20; // 可根据需求调整拆分粒度
    firstColContent.textContent = text.slice(0, splitPos);
    secondColContent.textContent = text.slice(splitPos) + secondColContent.textContent;
  }
}

原方案失效原因 #

wkhtmltopdf基于旧版WebKit内核，对CSS多列布局的高度限制和内容填充逻辑支持不完善，容易出现内容重叠、列宽错乱的问题，而Grid布局在0.12.6及以上版本的wkhtmltopdf中兼容性更好。

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