Question

我有一个HTML片段，一个长序列表的列表项

<li>
    <p class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</p>
    <p class="English">The elders discussed the matter.</p>
</li>

当打印文档时，CSS规则如何将列表项中的两个段落保持在一起？这意味着它们要么一起出现在页面的末尾，要么一起移动到下一页。

如何将段落和段落放在一起，以免发生分页？

我用

 .nw {page-break-after:avoid;}

但不起作用。实际上 nw 和英语段落之间的分页符 。就我理解规则而言，情况并非如此。要检查它，我使用Firefox的打印预览功能。

Answer 1

答案How do I avoid a page break immediately after a header有助于找到解决方案。它指的是Mozilla bug数据库中的this bug。

解决方案如下。

li {
      page-break-inside: avoid;
   }

它在Firefox中运行良好。

Answer 2

你的意思是在p级之间没有休息吗？您可以尝试将所有内容分组到一个元素中，然后使用元素标识每个类。例如，

<li>
    <p>
       <span class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</span>
       <span class="English">The elders discussed the matter.</span>
    </p>
</li>

或者，如果您尝试删除两个元素之间的空格，可以查看此处 - remove spaces between paragraphs

这是你的意思吗？

根据您的编辑，您的意思是打印。这将删除Web文档中的段落空间，但不会在打印时删除 - 只是对将来搜索此问题的任何人的注释。 R Lacorne似乎知道编辑问题的答案。

Answer 3

有多种因素在起作用，首先是重要因素：用户的打印机。

没有实现你想要的防弹方法（请注意如果打印机决定如何将图像切成两半）。

您可以使用一个查询，指出如果它在打印时，该特定文本片段会移动到页面上安全的地方，但这可能会导致其他问题，例如打破正常的布局流程等等。

我建议你阅读：http://davidwalsh.name/css-page-breaks

而且：

http://www.w3schools.com/cssref/pr_print_pageba.asp

打印样式表中的段落之间没有分页符

3 个答案:

这是你的意思吗？