mPDF：page-break-before：avoid;

Question

如何让第一个h1的mPDF（版本7）不分页？ 我已经在为this reason使用AddPageByArray了。

$mpdf->AddPageByArray([
    'margin-left' => '15mm',
    'margin-right' => '20mm',
    'margin-top' => '15mm',
    'margin-bottom' => '15mm',
]);

$html = "
<style type='text/css'>
h1 { page-break-before:always; }
h1:first-child { page-break-before:avoid; }
</style>
<h1>Heading 1</h1>";

结果是一个空白的第二页，我试图避免。

Answer 1

:first-child伪选择器不是mPDF（see the supported CSS in the mPDF documentation）中支持的元素。相反，您需要在第一个H1上设置内联样式（或者给它一个类并为第一个H1分配一个类）

$mpdf->AddPageByArray([
    'margin-left' => '15mm',
    'margin-right' => '20mm',
    'margin-top' => '15mm',
    'margin-bottom' => '15mm',
]);

$html = "
<style type='text/css'>
h1 { page-break-before:always; }
.no-page-break { page-break-before: inherit; }
</style>
<h1 style='page-break-before: inherit'>Heading 1</h1>
<h1 class='no-page-break'>Heading 1</h1>
<h1>Heading 1 on a new page</h1>";

从技术上讲，inherit不是mPDF中的有效属性，但它取消了always属性。

Answer 2

我今天遇到了这个错误。我找不到除了总是之外没有抛出mdf当前索引错误的page-break-before的任何值。我能让它工作的唯一方法是为我想要设计的元素第一次出现一个类，然后为其余的设置一个不同的类。首先，我使用SaaS执行以下操作（您可以使用直接CSS，但是您必须在两个类中复制样式，这有点乱）：

%heading {
    /* add all of the heading styling here... */
}

.heading--first {
    @extend %heading;
}

.heading {
    @extend %heading;
    page-break-before: always;
}

然后HTML看起来有点像这样：

<h1 class="heading--first">..</h1>
<h1 class="heading">..</h1>
<h1 class="heading">..</h1>

不是一个完全优雅的解决方案，但我找不到更好的解决方法，它的工作原理。我希望这有帮助。