打印时在分页处剪切文本

Question

当尝试在Chrome中打印时，div中的文字会在分页时被剪切。我尝试了各种page-break-xxx以及orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid;。我也尝试将div设置为table，block，inline，inline-block ......但没有任何效果。我花了很多时间在谷歌上搜索...我相信这必须在某个地方得到解答......有人能指出我的方向，如何或在哪里找到解决方案？提前致谢！

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

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

{{product.metafields.x}}基本上是H2，P标签等文本。

Answer 1

尝试在元素中添加类，

例如

。

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

然后在你的print.css上

添加此

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

这将允许您的页面未被剪切。

Answer 2

我不知道为什么它最初没有工作......可能用在了错误的元素上。但只是再次尝试，这解决了问题 CSS Printing: Avoiding cut-in-half DIVs between pages?