打印時在分頁符處剪切的文本

Question

嘗試在Chrome中打印時，我的文本在div內被剪切。我嘗試了各種各樣的頁面中斷xxx，以及orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid;。我也試圖將div設置爲table，block，inline，inline-block ......但沒有任何效果。我花了很多時間在Google上搜索......我相信這個問題必須在某個地方回答......任何人都可以指出我如何或在哪裏找到解決方案的方向？提前致謝！

<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標籤這樣的文本。

Answer 1

我不知道爲什麼它起初不工作...可能用在錯誤的元素上。但只是再試一次，這就修復了這個問題 CSS Printing: Avoiding cut-in-half DIVs between pages?

Answer 2

嘗試在您的元素中添加類，例如

。

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

然後在你的print.css

添加此

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

這將使你的網頁被完整無缺。