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 }

ブロック全体が壊れないものとして表示され、すべてが次のページに移動することを望んでいましたが、何もしませんでした. たぶん、私はこの問題をあまりにも長い間見つめていました。ページの各セクションがこのように分割されるのを防ぐ方法を知っている人はいますか?

注:前のセクションの残りが少ししかない場合、多くのページ スペースが無駄になる可能性があるため、各セクションの前に常に分割することは望ましくありません。

おまけ：その時点で水平線が壊れた場合に水平線を非表示にする方法を誰かが知っていれば、それも役に立ちます. しかし、それは私が本当に心配していない小さな煩わしさです.

4

1 に答える 1

0

私が考えることができる唯一の方法は、水平方向の罫線を最後のセクションの下部に、改ページが必要な前に移動することです。次に、ノード内の次のセクションをすべてラップし、それに no-page-break を追加します。ブラウザが検出できない要素が印刷時に多すぎるため、物事を巧みにグループ化できれば、非常に役立ちます。

于 2013-05-20T00:25:15.463 に答える