打印时在分页符处剪切文本答案

【问题标题】：Text cut at page break when print打印时在分页符处剪切文本
【发布时间】：2016-08-25 07:30:49
【问题描述】：

尝试在 Chrome 中打印时，我在 div 中的文本在分页符处被剪切。我试过各种page-break-xxx，还有orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid;。我还尝试将 div 设置为显示为表格、块、内联、内联块......但没有任何效果。我花了很多时间在谷歌上搜索......我相信这必须在某个地方得到回答......谁能指出我如何或在哪里找到解决方案的方向？提前致谢！

  <div role="tabpanel" class="tab-pane" id="tab_1">
    {{ product.metafields.a }}
  </div>

  <div role="tabpanel" class="tab-pane" id="tab_2">
    {{ product.metafields.b }}
  </div>

  <div role="tabpanel" class="tab-pane" id="tab_3">
    {{ product.metafields.c }}
  </div>

代码如上所示。它们实际上是标签，我强迫它们全部显示在打印上。我在.tab-pane 上尝试了各种page-break-xxx。

{{ product.metafields.x }} 基本上是 H2、P 标签之类的文本。

【问题讨论】：

能贴出完整的代码吗？
CSS Printing: Avoiding cut-in-half DIVs between pages?的可能重复

标签： html css

【解决方案1】：

尝试为您的元素添加类，

例如。

<div class="no-break">
</div>

然后在你的 print.css 上

添加这个

.no-break{ page-break-before: always; }

这将使您的页面不被剪切。

【讨论】：

感谢您的提示。我尝试在.tab-pane 上添加page-break-before: always（这是文本的包装器）和里面的文本元素，但都没有成功。

【解决方案2】：

我不知道为什么一开始它不起作用……可能是用在错误的元素上。但又试了一次，这解决了问题 CSS Printing: Avoiding cut-in-half DIVs between pages?

【讨论】：