CSS 和打印：将文本块放在一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2051788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS and Printing : Keep block of text together
提问by Chris Cudmore
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.
现在，我需要制作测试的可打印版本。这实际上更简单，因为我不需要包括收音机，只需'___'作为复选标记。主要问题是如何防止问题在分页符上分裂。
回答by Parrots
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?
我从来没有运气一直在阻止这样的事情。这可能有点脏，但如果问题的长度通常相同，你能在每 X 个问题后强制换页吗？
<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:
您可以尝试使用 page-break-inside 属性，但我还没有看到它是一致的，因为浏览器对它的支持现在一团糟：
question {
page-break-inside:avoid;
}
回答by Sampson
I'd suggest you look into page-break-after, page-break-insideand page-break-beforerules in CSS.
我建议你看看page-break-after，page-break-inside并page-break-before规定在CSS。
回答by Nate Barr
Use a table layout. But to avoid changing the semantics, use CSS.
使用表格布局。但是为了避免改变语义，请使用 CSS。
question {
display: inline-table;
}
回答by tahdhaze09
Use a separate print stylesheet, and use the page-break-beforeand page-break-afterselectors for your leading and ending questions on each page.
使用单独的打印样式表，并使用page-break-before和page-break-after选择器作为每页上的开头和结尾问题。
If the quiz is static, you can plot the classes you use out and make it work without anything more than CSS.
如果测验是静态的，您可以绘制您用过的类，并使其工作，只需要 CSS 即可。
