CSS и печать: держите блок текста вместе

Question

Это типичный экзамен с несколькими вариантами ответов. Предположим, формат вопроса:

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

и у меня все это сопоставлено соответствующим стилям с переключателями для Интернета.

Теперь мне нужно сделать версию теста для печати. Это на самом деле проще, потому что мне не нужно включать радио, просто «___» для галочки. Основная проблема заключается в том, как не допустить разделения вопроса на разрыв страницы.

Answer 1

Мне никогда не удавалось последовательно предотвращать что-то подобное. Это может быть немного грязно, но если вопросы, как правило, имеют одинаковую длину, можете ли вы вызвать разрыв страницы после каждого 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;
}

Answer 2

Я бы посоветовал вам ознакомиться с page-break-after, page-break-inside и page-break-before правилами в CSS.

Answer 3

Используйте макет таблицы. Но чтобы избежать изменения семантики, используйте CSS.

question {
    display: inline-table;
} 

Answer 4

Используйте отдельную таблицу стилей печати и используйте селекторы page-break-before и page-break-after для начальных и конечных вопросов на каждой странице.

Если тест является статическим, вы можете построить классы, которые вы используете, и заставить его работать без чего-либо большего, чем CSS.