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>

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

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


css printing page-break
person Chris Cudmore    schedule 12.01.2010    source источник
comment
Возможный дубликат CSS-печать: предотвращение разделения DIV пополам между страниц?   -  person Michael Freidgeim    schedule 21.03.2016

Ответы (4)


arrow_upward
39
arrow_downward

Мне никогда не удавалось постоянно предотвращать что-то подобное. Это может быть немного грязно, но если вопросы обычно имеют одинаковую длину, можно ли принудительно переносить страницу после каждого 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;
}
person Parrots    schedule 12.01.2010
comment
Похоже, что page-break-inside поддерживается только в Opera, что делает его практически бесполезным для The Real World (tm). Я думал о другом варианте, но основы различаются от одного лайнера до целого абзаца, поэтому нет единообразия в размер. - person Chris Cudmore; 12.01.2010
comment
Работает в IE8, хотя в настоящее время на сайте w3schools сказано, что IE не поддерживает. Думаю, в более старых версиях нет. Версия Firefox 3, которая у меня сейчас установлена, нет. У меня есть аналогичное требование, однако в отношении отчета, который будет напечатан, я решил попробовать создать PDF-файл, надеясь, что XSL-FO сработает. - person jamiebarrow; 07.01.2011
comment
page-break-inside: avoid у меня работает в Chrome 22 (в Firefox 15 все еще ничего). - person bdukes; 24.10.2012
comment
page-break-inside работает, начиная с FF19 +, поэтому все основные браузеры теперь его поддерживают. - person Sergiu Dumitriu; 15.07.2013
comment
Это не сработало для меня, но display:block сохранило мою целостность. - person Heraldmonkey; 23.01.2014
comment
Это отлично работает с wkhtmltopdf, спасибо за отличное решение !! - person Peter; 16.05.2014

arrow_upward
19
arrow_downward

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

person Sampson    schedule 12.01.2010

arrow_upward
1
arrow_downward

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

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

person tahdhaze09    schedule 12.01.2010
comment
Викторина является случайной, выбирается из пула. Таким образом, нет никакого способа узнать, что такое первый и последний вопросы на странице. - person Chris Cudmore; 12.01.2010
comment
Вам понадобится JS, чтобы проанализировать и найти, где заканчивается вопрос относительно размера вашей страницы. - person tahdhaze09; 13.01.2010

arrow_upward
1
arrow_downward

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

question {
    display: inline-table;
}
person Nate Barr    schedule 06.12.2012