CSS and Printing : Keep block of text together

问题

This is a typical Multiple Choice exam, Assume a question format:

<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>

and I've got this all mapped to appropriate styles with radio buttons for the web.

Now, I need to make a printable version of the test. This is actually simpler, in that I don't need to include radios, just '___' for a check mark. The major issue is how to keep the question from splitting over the page break.

回答1:

I haven't ever had luck with consistently preventing something like that. It may be a bit dirty, but if the questions are usually of the sameish length can you force a page-break after every X questions?

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

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

(Or apply that class to the question or whatever you want)

You can try using the page-break-inside property, but I haven't seen it be consistent as browser support for it is a mess right now:

question {
    page-break-inside:avoid;
}

回答2:

I'd suggest you look into page-break-after, page-break-inside and page-break-before rules in CSS.

回答3:

Use a table layout. But to avoid changing the semantics, use CSS.

question {
    display: inline-table;
}

回答4:

Use a separate print stylesheet, and use the page-break-before and page-break-after selectors for your leading and ending questions on each page.

If the quiz is static, you can plot the classes you use out and make it work without anything more than CSS.

来源：https://stackoverflow.com/questions/2051788/css-and-printing-keep-block-of-text-together

标签

css

printing

page-break