Страница HTML + CSS разбивает текстовые символы пополам (@media print)

Question

После переключения на вложенные упорядоченные списки, каждый из которых имеет один или несколько li с div, я получаю ужасные разрывы страниц, которые разрезают текст пополам.Я бы не возражал, если бы у контента был разрыв страницы, но его разрыв в середине текста на полях страницы недопустим.

Пример html (произвольно глубокий ol + li + ol +.... вложение неизвестно до времени выполнения - содержимое одной страницы, генерируемое в реакции):

Я уже разместил 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>

Пример разбитого макета печати с разрезами в самом тексте:

Другой пример сdiv класса «избежать перерыва» с изображением и надписью (абзац): Еще один пример разрыва страницы, при котором текст вопроса содержит класс CSS «избежать перерыва»:

Сначала я хочу создать MVP, поэтому, если требуется последняя версия Chrome / Firefox, я согласен с этим.

КакЯ не позволяю браузеру разрезать текстовые символы пополам при разрыве страницы?

У меня много кода в этом приложении, и в большинстве случаев я вообще не связан с этой проблемой, поэтому я постарался не обращать на это внимания,но если вам нужна дополнительная информация, пожалуйста, запросите ее, и я предоставлю ее.

Спасибо!

Answer 1

Очевидно, что после примерно 6 часов попыток отладить это и сделать более простой пример для воспроизведения здесь, я обнаружил, что простой пример всегда работал, и это потому, что я не поместил содержащий div для печати переполнение: авто .

Просто изменив это значение на переполнение: видимое , все разрывы сработают!

Очевидно, это потому, что браузеры не поддерживают какие-либодругой вид переполнения.

Спасибо всем за ваше время, если бы вы постоянно не просили воспроизводимый пример, мы бы не исправили это!:)