HTML + CSS页面将文本字符切成两半（@media打印）

Question

切换到嵌套的有序列表（每个都有一个或多个带有div的 li ）后，我得到了可怕的分页符，将文本切成两半。我不介意内容是否具有分页符，但是不接受在页边空白处打破中间文本字符的问题。

示例html（任意深度的ol + li + ol + ...嵌套直到运行时才知道-react中生成的单页内容）：

我已经放置了css以避免在图像上进行分页，并且在问题类中也使用了“避免中断”类：

.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包含< strong>溢出：自动。

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

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

谢谢大家的宝贵时间，您是否一直在要求一个可复制的示例，否则我们将无法解决此问题！ ：）