避免在標題和第一個列表項之間分頁符

Question

我有一個HTML文檔，我想確保打印時，分頁符不會在標題後立即出現。

在一個理想的世界，這將是作爲設置.heading {page-break-after: avoid;}一樣簡單，但大多數瀏覽器不支持page-break-after: avoid（或page-break-before: avoid），只有page-break-inside: avoid。

當一個獨立元素如p跟在我的標題後面時，我可以將標題和段落包裝在<div class="nobreak">中，並避免在.nobreak元素中分頁。

但有時候，一個長長的清單如下標題：

<h1>A list of things</h1> 
<ol> 
    <li>This is the first thing.</li> 
    <li>This is the next thing.</li> 
    ... 
    <li>Many things later, we reach the end.</li> 
</ol> 

我可以包裝h1和ol都在div.nobreak，但這是過於嚴格：它可以防止分頁符從任何發生在列表中，當我真正關心的是在第一個li之前阻止了一個突破。

出於顯而易見的原因（在ol標籤的存在），我不能在周圍元件包裹只是h1和第一li。

有關如何在此達到預期效果的任何想法？

Answer 1

<style> 
h1 { margin-bottom: 0; padding-bottom:0;} 
ol, li:first-child { margin-top: 0; padding-top: 0; } 
</style> 

使用li:first-child子類只能設置列表中的第一個元素。

確保在包裝元素之間沒有其他邊距或填充。