Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS and Printing : Keep block of text together

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.

like image 267
Chris Cudmore Avatar asked Jan 12 '10 19:01

Chris Cudmore


People also ask

How do I keep words together in CSS?

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, " &nbsp; ", to separate those words instead of a normal space.

How do I keep text in one line in CSS?

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.

How do I make text not wrap in CSS?

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

How do you prevent page breaks?

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.


2 Answers

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; } 
like image 88
Parrots Avatar answered Sep 21 '22 11:09

Parrots


I'd suggest you look into page-break-after, page-break-inside and page-break-before rules in CSS.

like image 30
Sampson Avatar answered Sep 22 '22 11:09

Sampson