HTML+CSS 分页符将文本字符切成两半(@media print)

Question

切换到嵌套有序列表后，每个列表都有一个或多个 li 和一个 div，我得到可怕的分页符，将文本切成两半。我不介意内容是否有分页符，但在页边距中分页是 Not Acceptable 。

示例 html(任意深度 ol + li + ol + ... 直到运行时才知道嵌套 - 在 react 中生成单页内容):

我已经在问题类中放置了 css 以避免图像分页和类“avoid-break”:

.TestEditorQuestion {
  position: relative;
  border: 3px;
  background-color: #eee;
  border-color: gray;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: .08rem;
  padding-bottom: .08rem;
  margin: 5px;
  text-align: left;
  border-radius: 10px;
  width: 99%;
  display: block;
  height: 10%;
  box-sizing: border-box;
}

... lots of css code that doesn't affect this

avoid-break {
  break-inside: avoid;
  page-break-inside: avoid; // for older browsers
}

@media print {
  .no-print,
  button {
    display: none !important;
  }
  @page {
    size: A4;
    margin: 1.5cm;
    @bottom-center {
      content: counter(page) "/" counter(pages);
    }
  }
}

<ol>
  ...
  <li>
    <div class="TestEditorQuestion avoid-break">
      <p>() Dois ou mais .... (long text) ...</p>
    </div>
  </li>
  <li>
    <div class="TestEditorImage avoid-break">
      <img ...>...</img>
      <p> ... long question text ...</>
  </li>
  ....
</ol>

文本本身被剪切的打印版面损坏示例:

带有图像和标题(段落)的类“avoid-break”的 div 的其他示例: 另一个分页符切割具有 avoid-break CSS 类的问题文本的示例:

我想先构建一个 MVP，所以如果需要使用最新的 chrome/firefox 版本，我现在可以接受。

如何阻止浏览器在分页符处将文本字符切成两半？

我在这个应用程序中有很多代码，而且大部分与这个问题完全无关，所以我尽量将其排除在外，但如果您需要额外的信息，请提出要求，我会提供。

谢谢!

Answer 1

显然，在尝试调试它并制作一个更简单的示例以进行复制后大约 6 个小时后，我发现这个简单的示例始终有效，那是因为我没有放置用于打印的包含 div < strong>溢出:自动。

只需将其更改为overflow: visible，所有中断都有效!

显然这是因为浏览器不支持任何其他类型的溢出。

感谢大家抽出宝贵时间，如果不是您一直要求提供可重现的示例，我们就不会修复此问题! :)