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

Question

切换到嵌套有序列表（每个列表都有一个或多个带 div 的li ）后，我会遇到可怕的分页符，将文本切成两半。我不介意内容是否有分页符，但让它在页边距中破坏中间文本字符是不可接受的。

示例 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 的示例： 另一个分页符剪切具有避免中断 CSS 类的问题文本的示例：

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

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

我在这个应用程序中有很多代码，大部分与这个问题完全无关，所以我试图忽略它，但如果您需要额外的信息，请请求它，我会提供它。

谢谢你！

Answer 1

显然，经过大约 6 个小时的尝试调试这个并制作一个更简单的示例放在此处进行复制后，我发现这个简单的示例总是有效，那是因为我没有放置一个包含 div 的打印溢出：auto。

只需将其更改为“溢出：可见”，所有中断都可以工作！

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

感谢大家抽出宝贵的时间，如果不是你们不断地要求提供一个可重现的示例，我们就不会解决这个问题！:)