suspensivos - truncar texto css

CSS e impresión: mantener el bloque de texto juntos

Question

Este es un examen típico de opción múltiple, asume 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 asignado a los estilos apropiados con botones de radio para la web.

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

Answer 1

Le sugeriría que busque en las reglas de page-break-before page-break-inside y page-break-before en CSS.

Answer 2

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

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

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

Puedes intentar usar la propiedad page-break-inside, pero no he visto que sea coherente, ya que el soporte del navegador es un desastre en este momento:

question {
page-break-inside:avoid;
}

Answer 3

Use una hoja de estilo de impresión separada, y use los selectores de page-break-after page-break-before y page-break-after para sus preguntas iniciales y finales en cada página.

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

Answer 4

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

question {
display: inline-table;
}