CSS y prensa: Mantener bloque de texto junto

Question

Este es un típico examen de opción múltiple, asumir un formato de pregunta:

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

y tengo todo esto asigna a los estilos apropiados con los botones de radio para la web.

Ahora, tengo que hacer una versión imprimible de la prueba. Esto es realmente más simple, ya que no necesito incluir radios, solo '___' para una marca de verificación. El problema principal es cómo evitar que la pregunta se divida durante el salto de página.

Answer 1

Nunca he tenido suerte con la prevención constante de algo así. Puede ser un poco sucio, pero si las preguntas son generalmente de la misma duración, ¿puede forzar un salto de página después de cada X pregunta?

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

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

(O aplicar esa clase a la pregunta o lo que quieras)

puede intentar utilizar el page-break-dentro de la propiedad, pero no he visto que sea consistente como soporte de los navegadores para los que es un desastre en este momento:

question { 
    page-break-inside:avoid; 
} 

Answer 2

Sugiero que busque en page-break-after, page-break-inside y page-break-before reglas en CSS.

Answer 3

use una hoja de estilos de impresión independiente, y utilizar los page-break-before y page-break-after selectores para su líder y preguntas que terminan en cada página.

Si la prueba es estática, puede trazar las clases que utiliza y hacer que funcione sin más que CSS.

Answer 4

Usa un diseño de tabla. Pero para evitar cambiar la semántica, use CSS.

question { 
    display: inline-table; 
}