mPDF：page-break-before：avoid;

Question

如何使mPDF（第7版）在第一個h1中 不分頁？
由於這個原因，我已經在使用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中不受支持（ 請參閱mPDF文檔中受支持的CSS ）。 相反，您需要在第一個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當前索引錯誤總是之外的任何值。 我可以使它起作用的唯一方法是為我要樣式化的元素的第一個匹配項創建一個類，然后為其余元素設置一個不同的類。 首先，我使用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>

這不是一個完美的解決方案，但是我找不到更好的解決方法，它可以工作。 我希望這有幫助。