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

Question

切换到嵌套有序列表后，每个列表都有一个或多个 li 和 div，我变得可怕 page-breaks 将文本切成两半.如果内容有 page-break，我不介意，但在页边距中打断 mid-text-characters 是不可接受的。

示例 html（arbitrarily-deep ol + li + ol + ... 直到运行时才知道嵌套 - 在反应中生成单页内容）：

我已经放置了 css 以避免 page-breaks 超过图像，class "avoid-break" 也放在问题 classes 中：

.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>

文本本身被剪切的损坏的打印布局示例：

div 的 class "avoid-break" 的另一个示例，带有图像和标题（段落）： page-break 剪切具有 avoid-break CSS class 的问题文本的另一个示例：

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

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

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

谢谢！

Answer 1

显然，在尝试调试它并制作一个更简单的示例以供重现后大约 6 个小时后，我发现这个简单的示例始终有效，那是因为我没有放置包含 div印刷品有 overflow:auto.

只需将其更改为 溢出：可见，所有中断都有效！

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

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

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

HTML+CSS page breaks cutting text characters in half (@media print)

html

css

css-paged-media