2
我想通過CSS優化我的頁面以便從瀏覽器打印。我遇到的問題是正確設置分頁符。我已經阻止了圖片和文本塊中間的分頁符，這些分頁符不應該完全按照我的需要分開。但是，我遇到的問題是，有時會有一條水平線將新部分分開，然後只是下一部分的標題（以及潛在的該部分的描述），其餘部分顯示在下一頁。這是令人困惑和糟糕的格式化，通常如果該部分的標題接近頁面的底部，則只需在分頁之前插入分頁符即可將整個內容打到下一頁，而不必擔心上一頁中的少量空間會被犧牲。如何將橫向規則建議爲好的分頁點？
這裏的HTML是非常簡單的。它沒有包含在一百萬件事情中，只是一個水平的規則，標題，帶有描述的段落，然後是段落的內容。我試圖做的是一起包裝在一個部門的頭和說明，並使它所以它可以在室內或之後不分頁，像這樣：
<a id="section_1"></a>
<div class="no-page-break">
<h2>Section 1</h2>
<p>Section 1 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<hr />
<a id="section_2"></a>
<div class="no-page-break">
<h2>Section 2</h2>
<p>Section 2 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<!-- and so on -->
.no-page-break { page-break-after: avoid; page-break-inside: avoid }
我希望它會看到整個區塊都是不可破壞的，並將整個事物推到下一頁，但它沒有做任何事情。也許我只是盯着這個問題太久了。有誰知道我可以如何防止我的網頁的每一部分以這種方式分手？
注：我不希望每個部分之前，它總是突破，因爲這可能會浪費大量的頁面空間，如果有隻與前一個有點剩。
紅利：如果有人知道如果在那個時候打破了水平線，那麼這也會有幫助。但這只是一個小小的煩惱，我並不真正擔心。