web-dev-qa-db-ja.com

CSSと印刷：テキストのブロックを一緒に保つ

これは典型的な多肢選択式試験です。質問形式を想定してください。

<question qid='1'>
<stem>What is your name?</stem>
<choice value = 'a'>Arthur, King of the Britons</choice>
<choice value = 'b'>There are some who call me ... Tim!</choice>
<choice value = 'c'>He is brave Sir Robin, brave Sir Robin, who-- Shut up! Um, n-- n-- n-- nobody, really. I'm j-- j-- j-- ju-- just, um-- just passing through.</choice>
<choice value = 'd'>Sir Galahad... the Chaste.</choice>
<choice value = 'e'>Zoot... Just Zoot.</choice>
</question>

これはすべて、Web用のラジオボタンを使用して適切なスタイルにマッピングされています。

次に、テストの印刷可能なバージョンを作成する必要があります。これは実際にはもっと簡単で、ラジオを含める必要はなく、チェックマークは「___」だけです。主要な問題は、質問が改ページで分割されないようにする方法です。

cssprintingpage-break
27
Chris Cudmore

私はそのようなことを一貫して防ぐことができたことがありません。少し汚れているかもしれませんが、質問の長さが通常同じである場合、X個の質問ごとに改ページを強制できますか？

<style type="text/css">
.pageBreak{
    page-break-before: always;
}
</style>

<question>...</question><br class="pageBreak" />
<question>...</question>

（または、そのクラスを質問または必要なものに適用します）

Page-break-insideプロパティを使用してみることができますが、ブラウザでのサポートが現在混乱しているため、一貫性があるとは思いません。

question {
    page-break-inside:avoid;
}
31
Parrots

調べてみることをお勧めします page-break-after 、 page-break-inside および page-break-before CSSのルール。

17
Sampson

個別の印刷スタイルシートを使用し、各ページの先頭と末尾の質問にpage-break-beforeおよびpage-break-afterセレクターを使用します。

クイズが静的な場合は、使用するクラスをプロットして、CSS以外の何もせずに機能させることができます。

1
tahdhaze09

テーブルレイアウトを使用します。ただし、セマンティクスの変更を避けるために、CSSを使用してください。

question {
    display: inline-table;
}
1
Nate Barr