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