1

我正在生成基于 HTML 内容的 PDF 文档，并且遇到了分页问题。我有一个包含许多段落的文档，使用编号列表。这些工作得很好，除非它是一个超出页面末尾的多行段落。

在这种情况下，只有段落编号保留在当前页面上，而段落的整个文本将移至下一页。

我想将数字和所有文本移到下一页 -或者- 在当前页面上显示文本的第一行。换句话说，始终将段落编号和文本放在一起。

我尝试在列表项周围放置 section 或 div 标签并使用break-inside: avoid，但这似乎没有任何效果。

谁能告诉我我在这里错过了什么？

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;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") ". ";
  width: 4em;
  position: absolute;
  left: 0;
}

section {
  break-inside: avoid;
} 
<!DOCTYPE html>

<html>

<b>Summary of the challenge</b>
<ol>
  <li>
    A paragraph with a single line of text works fine.
  </li>

  <section>
    <li>
      A multiline paragraph will break between the number and the text.
    </li>
  </section>
</ol>

</html>

4

0 回答 0