Html 元素不会在元素值本身内破坏页面，这会导致几个半空页面

【问题标题】：Html elements not breaking page within the element value itself which leads to several half-empty pagesHtml 元素不会在元素值本身内破坏页面，这会导致几个半空页面
【发布时间】：2020-12-20 14:07:54
【问题描述】：

我正在使用标记从 Markdown 生成 html，并使用可通过 npm 安装的 github-markdown-css 的略微修改版本。使用 html-pdf 从该 html 和 css 中生成一个 pdf。

我定义了一个样式类，它有page-break-inside: avoid 属性。我需要例如消息标题和消息本身，这样这两个项目就不会被分页符分隔。现在的问题是我在这些组之前有巨大的空白区域，因为之前分页符，但我实际上只需要标题和消息之间的page-break-inside: avoid，而不是消息本身。

如何尝试在邮件本身中保留分页符？我已经尝试过使用page-break-after: avoid 作为头条新闻，但不知何故并没有做出任何改变。

【问题讨论】：

标签： html css pdf phantomjs

【解决方案1】：

我相信会是这样的

page-break-after: avoid;

对于消息上方的副标题/标题（示例）：

<h style="page-break-after: avoid;">MESSAGE TITLE</h>
<p>My Message</p>

从你所说的来看，你似乎有一个拥抱元素 (div) 和 page-break-inside:avoid。尝试使用page-break-before:avoid 和page-break-after:avoid 将其分成更小的元素<p> 和<h>

【讨论】：

是的，那是我的初始版本，我又试了一次，问题是即使我的标题有 page-break-after: avoid，标题本身在放置图像时仍停留在页面的一半到下一页。我需要标题和图片一起切换到下一页（我的图片有page-break-before: avoid）