CSS / 列印時跨頁時文字被截掉、切成兩半

CSS / 列印時跨頁時文字被截掉、切成兩半

May 25, 2020

最近有公司產品有客服反應,我們前端頁面在列印時,在跨頁時字會被截掉,在換頁的地方會被切成兩半。然後我在火狐上測試,會無法列印全部網頁範圍。這真是一個神奇的問題。

類似變成這樣:

在換頁處被截斷

一開始是找到這些:

就是在列印模式時,將 div 或者要列印的區域,將 page-break-inside 設定為 avoid

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

但我們實際測試後,在很長的頁面還是有一樣的問題。這下真的難倒我了,四處尋覓還是找不到合適的解決方案。

經過一天後,我主管回信客服已經上 hotfix 解決此問題,讓我十分好奇到底是怎麼解開的?

原來銳眼如他,發現在列印時,上下高度的間距竟然些微不同,經過一陣尋覓後,發現是外層 containerflex 屬性惹禍,於是就在列印模式中,將那些元素設定成 display: block 或是 display: inline-block,不再使用 flex 彈性調整。

接下來再使用適當的關鍵字果然就查到類似的問題了:

給我讚!


© 2019-2021 Su Jing Jhong 版權所有 創用 CC 授權條款