This is a typical Multiple Choice exam, Assume a question 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>
and I've got this all mapped to appropriate styles with radio buttons for the web.
Now, I need to make a printable version of the test. This is actually simpler, in that I don't need to include radios, just '___' for a check mark. The major issue is how to keep the question from splitting over the page break.
If you only have the one-off instance of two or more words that you want to force the browser to keep on a single line, the easiest way is to use the non-breaking space character, " ", to separate those words instead of a normal space.
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
On the Format menu, select Paragraph, and then select the Line and Page Breaks tab. Clear the Keep lines together, Keep with next, and Page break before check boxes.
I haven't ever had luck with consistently preventing something like that. It may be a bit dirty, but if the questions are usually of the sameish length can you force a page-break after every X questions?
<style type="text/css"> .pageBreak{ page-break-before: always; } </style> <question>...</question><br class="pageBreak" /> <question>...</question>
(Or apply that class to the question or whatever you want)
You can try using the page-break-inside property, but I haven't seen it be consistent as browser support for it is a mess right now:
question { page-break-inside:avoid; }
I'd suggest you look into page-break-after
, page-break-inside
and page-break-before
rules in CSS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With