CSS 和打印：将文本块放在一起答案

【问题标题】：CSS and Printing : Keep block of text togetherCSS 和打印：将文本块放在一起
【发布时间】：2011-01-04 08:08:47
【问题描述】：

这是一个典型的多项选择题考试，假设问题格式：

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

我已经将所有这些都映射到带有网络单选按钮的适当样式。

现在，我需要制作一个可打印的测试版本。这实际上更简单，因为我不需要包括收音机，只需“___”作为复选标记。主要问题是如何防止问题因分页符而分裂。

【问题讨论】：

CSS Printing: Avoiding cut-in-half DIVs between pages?的可能重复

标签： css printing page-break

【解决方案1】：

我从来没有运气一直阻止类似的事情发生。可能有点脏，但是如果问题通常长度相同，您可以在每 X 个问题后强制分页吗？

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

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

（或者将该类应用于问题或任何你想要的）

您可以尝试使用 page-break-inside 属性，但我还没有看到它是一致的，因为浏览器对它的支持现在一团糟：

question {
    page-break-inside:avoid;
}

【讨论】：

看起来 page-break-inside 仅在 Opera 中受支持，这使得它对“真实世界”（tm）几乎没用我考虑过另一种选择，但词干与一个衬里不同到整个段落，因此大小不一致。
在 IE8 中工作，尽管目前 w3schools 网站说 IE 不支持。我猜旧版本没有。我目前拥有的 Firefox 3 版本，没有。我有类似的要求，但是在将要打印的报告上，决定尝试使用 PDF 生成方式，希望 XSL-FO 可以工作。
page-break-inside: avoid 在 Chrome 22 中为我工作（在 Firefox 15 中仍然没有）。
page-break-inside 以FF19+ 开头，所以现在所有主流浏览器都支持了。
这对我不起作用，但display:block 让我的保持不变。

【解决方案2】：

我建议您查看 CSS 中的 page-break-after、page-break-inside 和 page-break-before 规则。

【讨论】：

【解决方案3】：

使用单独的打印样式表，并使用page-break-before 和page-break-after 选择器作为每页上的前导和结尾问题。

如果测验是静态的，您可以绘制出您使用的类，并使其在不使用 CSS 的情况下运行。

【讨论】：

测验是随机的，从一个池中选择。所以没有办法知道页面的第一个和最后一个问题是什么。
您需要 JS 来解析并找到与您希望“页面”大小相关的问题的结束位置。

【解决方案4】：

使用表格布局。但为避免改变语义，请使用 CSS。

question {
    display: inline-table;
}

【讨论】：