CSS и печать: сохраняйте блок текста

Это типичный экзамен Multiple Choice, предполагающий формат вопроса:

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

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

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

Ответ 1

Мне никогда не везло, чтобы последовательно предотвращать что-то подобное. Это может быть немного грязно, но если вопросы, как правило, имеют одинаковую длину, вы можете заставить перерыв страницы после каждого X вопросов?

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

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

(Или примените этот класс к вопросу или тому, что вы хотите)

Вы можете попробовать использовать свойство "разрывать страницу", но я не видел, чтобы он был последовательным, поскольку поддержка браузера для него бесполезна прямо сейчас:

question {
    page-break-inside:avoid;
}

Ответ 2

Я предлагаю вам заглянуть в page-break-after, page-break-inside и page-break-before в CSS.

Ответ 3

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

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

Ответ 4

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

question {
    display: inline-table;
}