CSS und Druck: Halt Textblock zusammen

Dies ist eine typische Multiple-Choice-Prüfung, wird angenommen, eine Frage Format:CSS und Druck: Halt Textblock zusammen

<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 das alles entsprechenden Stil mit Radio-Buttons für das Web abgebildet bekommt.

Jetzt muss ich eine druckbare Version des Tests machen. Das ist eigentlich einfacher, da ich keine Radios, nur '___' für ein Häkchen einbeziehen muss. Das Hauptproblem besteht darin, die Fragestellung nicht über den Seitenumbruch aufzuteilen.

Quelle

2010-01-12 Chris Cudmore

Rollback von bearbeiten. "Witwen" ist das richtige Tag. "Windows" ist nicht. –

Dies benötigt kein neues Tag. – Charles

Das mag stimmen. Aber der Schnitt war falsch. –

Ich hatte nie Glück gehabt, etwas so zu verhindern. Es kann ein bisschen schmutzig sein, aber wenn die Fragen normalerweise die gleiche Länge haben, können Sie nach jeder X-Frage einen Seitenwechsel erzwingen?

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

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

(Oder diese Klasse auf die Frage anwenden oder was auch immer Sie wollen)

Sie können versuchen, die page-break-inside Eigenschaft, aber ich habe es nicht für sie als Browser-Unterstützung im Einklang gesehen jetzt ist ein Chaos:

question { 
    page-break-inside:avoid; 
}

Quelle

2010-01-12 19:45:22 Parrots

Sieht aus wie page-break-inside wird nur in Opera unterstützt, was es fast nutzlos für "The Real World" (tm) Ich dachte über die andere Option, aber die Stämme variieren von einem Liner zu ganzen Absätzen, so Es gibt keine Konsistenz in der Größe. –

Funktioniert in IE8, obwohl die Website w3schools laut IE derzeit nicht unterstützt wird. Ich denke, ältere Versionen nicht. Firefox 3 Version, die ich derzeit habe, nicht. Ich habe eine ähnliche Anforderung, aber auf einen Bericht, der gedruckt wird, beschlossen, zu versuchen und gehen Sie die PDF-Generation Weg, in der Hoffnung, dass XSL-FO funktioniert. – jamiebarrow

'page-break-inside: vermeiden 'funktioniert für mich in Chrome 22 (noch nichts in Firefox 15). – bdukes

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

Quelle

2010-01-12 19:41:37 Sampson

einen separaten Drucksheet verwenden, und verwenden Sie die page-break-before und page-break-after Selektoren für Ihre führenden und endend Fragen auf jeder Seite.

Wenn das Quiz statisch ist, können Sie die Klassen, die Sie verwenden, grafisch darstellen und es ohne etwas mehr als CSS arbeiten lassen.

Quelle

2010-01-12 19:57:30 tahdhaze09

Quiz ist zufällig, ausgewählt aus einem Pool. Es gibt also keine Möglichkeit zu wissen, was die erste und die letzte Frage einer Seite sind. –

Sie benötigen JS, um durchzuspähen und zu finden, wo eine Frage im Verhältnis zu der Größe endet, die Ihre "Seite" haben soll. – tahdhaze09

Verwenden Sie ein Tabellenlayout. Um die Semantik nicht zu ändern, verwenden Sie CSS.

question { 
    display: inline-table; 
}

Quelle

2012-12-06 20:08:03

CSS und Druck: Halt Textblock zusammen

Antwort

Verwandte Themen