3

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

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

我已经放置了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 版本，我现在可以接受。

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

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

谢谢！

4

1 回答 1

2

显然，经过大约 6 个小时尝试调试它并制作一个更简单的示例以放在这里进行复制，我发现这个简单的示例总是有效，那是因为我没有放置一个包含用于打印的 div 有overflow:auto。

只需将其更改为overflow: visible，所有中断工作！

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

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

于 2019-05-05T17:14:30.307 回答