CSS und Drucken: Halten Sie den Textblock zusammen

Dies ist eine typische Multiple-Choice-Prüfung, Übernehmen eine Frage-format:

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

und ich habe diese alle zugeordnet zu entsprechenden Stile mit radio-buttons für die web.

Nun, ich brauche, um eine druckbare version des Tests. Dies ist tatsächlich einfacher, ich brauche nicht zu zählen radios, nur '___' ein Häkchen. Die große Frage ist, wie die Frage von der Spaltung über die Seite brechen.

Kommentar zu dem Problem
Rollback Bearbeiten. "Witwen" ist der richtige tag. "Windows" ist es nicht. Kommentarautor: Chris Cudmore
Dies muss nicht ein neues tag. Kommentarautor: Charles
Das mag wahr sein. Aber der edit-war falsch. Kommentarautor: Chris Cudmore
Möglich, Duplikat der CSS Drucken: Vermeidung von Schnitt--halb-DIVs zwischen den Seiten? Kommentarautor: Michael Freidgeim

InformationsquelleAutor der Frage Chris Cudmore | 2010-01-12

  1. 25

    Ich habe nicht immer Glück gehabt mit konsequent verhindern, dass so etwas wie. Es kann sein, ein bisschen schmutzig, aber wenn die Fragen in der Regel von sameish Länge können Sie erzwingen einen Seitenumbruch nach jeder X Fragen?

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

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

    (Oder gelten, dass die Klasse die Frage oder was auch immer Sie wollen)

    Können Sie versuchen, mit den page-break-inside-Eigenschaft, aber ich habe es nicht gesehen, werden konsequent als browser-Unterstützung für den ist es ein Schlamassel:

    question {
    page-break-inside:avoid;
}

    InformationsquelleAutor der Antwort Parrots

  2. 14

    Ich würde vorschlagen, Sie schauen in page-break-after, page-break-inside und page-break-before Regeln in CSS.

    InformationsquelleAutor der Antwort Sampson

  3. 1

    Verwenden Sie eine separate Druck-stylesheet und verwenden Sie die page-break-before und page-break-after Selektoren für Ihre führende und endende Fragen auf jeder Seite.

    Wenn das quiz ist statisch, Sie zeichnen können die Klassen, die Sie verwenden, und machen es Arbeit, ohne die nichts mehr, als mit CSS.

    InformationsquelleAutor der Antwort tahdhaze09

  4. 1

    Verwenden Sie einen Tabellen-layout. Aber um zu vermeiden, ändern die Semantik, die den Einsatz von CSS.

    question {
    display: inline-table;
}

    InformationsquelleAutor der Antwort Nate Barr

Schreibe einen Kommentar