html - rotate(90deg) 打印不友好

Question

我正在制作一个混合了 A4 横向和纵​​向页面的网站，如下图所示:

当我尝试打印时，效果不佳。所以我添加了一个 CSS 来将纵向页面旋转 90 度:

.page {
      padding-top:0.5cm;
      padding-bottom:0.5cm;
      padding-left: 1cm;
      padding-right: 1cm;
      border: 5px #ccc solid;
      height: 296mm;
      width: 210mm;   
      outline: 2cm whitesmoke solid;

      background: white;
      margin: 1mm auto;
      position: relative;

 } 


.landscape {
      position: relative;
      width: 296mm;
      height: 210mm;
      margin: 1mm auto;
      margin-top : 180px;
      margin-bottom : 180px;
      background: white;

      outline: 2cm whitesmoke solid;
      border: 5px #ccc solid;           
      padding-top:0.5cm;
      padding-bottom:0.5cm;
      padding-left: 1cm;
      padding-right: 1cm;     
}



@media print {
.rotate_print{
    transform: rotate(90deg);
}    

    .page {
        page-break-before: always;        
        margin : 0mm;            
        padding : 1cm;        
        outline: 0;
        border: 0px;        
    }

    .landscape {
        page-break-before: always;    
        margin : 0mm;   
        padding : 1cm; 
        outline: 0;
        border: 0px;        
    }

    .no-print {
        display: none;
    }
 }

页面已旋转，但它在旋转页面和正常页面之间创建了一些大空间:

而且无法正确打印，旋转后的页面仍然存在如下图所示的问题。如何正确打印使用旋转变换的网页？

我尝试将位置更改为相对位置并尝试将页面移近一些，但问题仍然存在。我还尝试将打印机设置更改为 0 页边距。在 Safari 和 Chrome 上试过了。

Answer 1

称为 page-break-inside 和 break-inside 的属性可用于停止页面拆分

@media print{
   .page{
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: always;
        break-before: always;
    }
   .landscape{
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: always;
        break-before: always;
    }
}