Блог

Главная - Вопросы по программированию - Как избежать разрыва страницы между номером абзаца и самим абзацем?

Как избежать разрыва страницы между номером абзаца и самим абзацем?

#html #page-break-inside

Вопрос:

Я создаю PDF-документы на основе HTML-контента и борюсь с проблемой разрыва страницы. У меня есть документ со множеством абзацев, в котором используются нумерованные списки. Они работают просто отлично, если только это не многострочный абзац, который выходит за пределы конца страницы.

В этом случае на текущей странице остается только номер абзаца, а весь текст абзаца переходит на следующую страницу.

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

Я попытался поместить теги раздела или раздела вокруг элемента списка и использовать break-inside: avoid , но это, похоже, не возымело никакого эффекта.

Может ли кто-нибудь сказать мне, чего мне здесь не хватает?

 ol {
  counter-reset: section;
  list-style-type: none;
  padding-left: 0;
  list-style-position: outside;
}

li {
  margin-top: 10px;
  display: block;
  padding-left: 40px;
  position: relative;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") ". ";
  width: 4em;
  position: absolute;
  left: 0;
}

section {
  break-inside: avoid;
}  
 <!DOCTYPE html>

<html>

<b>Summary of the challenge</b>
<ol>
  <li>
    A paragraph with a single line of text works fine.
  </li>

  <section>
    <li>
      A multiline paragraph will break between the number and the text.
    </li>
  </section>
</ol>

</html>
Метки: