基于HTML生成PDF时，如何避免段落编号与段落内容分离分页？

看起来你遇到的核心问题有两个：HTML结构错误和分页属性没有作用到正确的元素上，另外PDF渲染引擎对CSS分页属性的支持也需要注意细节，我来一步步帮你解决：

1. 先修复无效的HTML结构 #

你把<section>放在了<li>外面，这不符合HTML规范——<ol>的直接子元素只能是<li>，浏览器会自动修正这个错误，导致你的break-inside: avoid完全没作用到列表项上。正确的做法是把<section>嵌套在<li>内部，或者直接给<li>添加分页禁止属性。

2. 给列表项添加正确的分页控制 #

你需要把break-inside: avoid（以及兼容旧引擎的page-break-inside: avoid）直接应用到<li>元素上，而不是外面的无效section。另外，因为你的编号是用伪元素实现的绝对定位，要确保整个<li>作为一个整体不被拆分，还要注意一些PDF渲染器的特殊要求：

修改后的CSS：

ol { 
  counter-reset: section; 
  list-style-type: none; 
  padding-left: 0; 
  list-style-position: outside; 
} 
li { 
  margin-top: 10px; 
  display: block; 
  padding-left: 40px; 
  position: relative;
  /* 添加核心分页控制 */
  break-inside: avoid;
  page-break-inside: avoid; /* 兼容旧PDF渲染引擎（如wkhtmltopdf） */
  /* 确保元素不会被意外拆分 */
  overflow: visible;
} 
li::before { 
  counter-increment: section; 
  content: counters(section, ".") ". "; 
  width: 4em; 
  position: absolute; 
  left: 0;
  /* 可选：防止伪元素单独被拆分 */
  break-inside: avoid;
} 

修正后的HTML结构：

<!DOCTYPE html> 
<html> 
<body>
  <b>Summary of the challenge</b> 
  <ol> 
    <li> A paragraph with a single line of text works fine. </li> 
    <li> 
      <section>
        A multiline paragraph will break between the number and the text. 
      </section>
    </li> 
  </ol> 
</body>
</html>

3. 额外注意：PDF渲染引擎的差异 #

不同的PDF生成工具对CSS分页属性的支持程度不同：

• 如果你用Chrome打印生成PDF，break-inside: avoid应该能正常工作，但要确保没有其他CSS（比如flex布局、float）破坏元素的块级特性。
• 如果你用wkhtmltopdf这类旧工具，可能需要额外给<li>添加display: inline-block; width: 100%;来强制元素作为一个整体（不过这可能影响布局，需要测试调整）。

4. 备选方案：强制列表项整体换行 #

如果上面的方法还是不行，你可以尝试给<li>添加break-before: avoid，或者调整margin/padding避免列表项刚好卡在页面底部。另外，也可以用display: table让整个列表项成为不可拆分的单元：

li {
  display: table;
  width: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
  /* 保留原有样式 */
}

核心思路就是先修正HTML结构，把分页属性应用到正确的<li>元素上，再根据你使用的PDF生成工具调整兼容属性，这样就能保证编号和文本始终在一起了。

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