如何正确使用CSS page-break属性避免HTML2PDF分页截断卡片

我有一个包含多个Angular Material卡片的HTML页面，卡片结构如下：

...

<mat-card class="mat-card-98">
    <mat-card-header>
      <mat-card-title>THIS IS MY TITLE</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      THIS IS MY CONTENT
    </mat-card-content>
</mat-card>

...

使用HTML2PDF库将该页面转换为PDF文件时，分页处的卡片内容会被截断。我尝试了以下CSS代码但无效：

.mat-card {
  display: block;
  margin-bottom: 16px;
  break-before: avoid
}

解决方案 #

你之前用的break-before: avoid是防止在卡片前插入分页，这并不是解决卡片内部被截断的正确属性。试试以下调整：

1. 核心CSS修复
   使用break-inside: avoid（加上兼容旧规则的page-break-inside: avoid）来阻止卡片在内部被分页拆分：

   .mat-card {
     display: block;
     margin-bottom: 16px;
     break-inside: avoid;
     page-break-inside: avoid; /* 兼容HTML2PDF的旧版渲染逻辑 */
     page-break-after: auto; /* 确保卡片后正常分页 */
   }
   

2. 修复子元素干扰
   Angular Material的卡片子元素（比如mat-card-header、mat-card-content）可能带有浮动、绝对定位等属性，破坏分页规则。添加以下CSS重置这些属性：

   .mat-card-header, .mat-card-content {
     float: none;
     position: static;
     overflow: visible;
   }
   

3. 排查溢出截断
   如果卡片设置了overflow: hidden，会导致内容被截断，强制重置为可见：

   .mat-card {
     overflow: visible !important;
   }
   

4. HTML2PDF配置优化
   初始化HTML2PDF时，调整渲染参数确保分页逻辑正常工作：

   html2pdf().set({
     margin: 15,
     filename: 'cards_export.pdf',
     html2canvas: { 
       scale: 2, 
       useCORS: true 
     },
     jsPDF: { 
       unit: 'mm', 
       format: 'a4', 
       orientation: 'portrait' 
     }
   }).from(document.body).save();
   

原理说明 #

break-inside: avoid会告诉PDF渲染引擎，不要在当前元素内部插入分页符，确保整个卡片完整显示在同一页或跳转到下一页完整显示。而break-before: avoid仅控制元素前是否分页，无法解决元素内部被截断的问题。

内容的提问来源于stack exchange，提问作者user19478325