ngx-datatable行中的包装文本在打印视图中被切断

Question

我为ngx的datatable-body-cell-label类重写了css，以便在打印时将内容包装起来。然而，作为一个不受欢迎的副作用，包装文本正在被切断时，页面中断。

我试图通过添加page-break-inside: avoid;' to the css for both thedatatable-body-cellanddatatable-body-cell-label`类来补救这个问题，但没有效果。

ngx-模板中的数据表：

    <ngx-datatable class="material results-grid engagement-specifics" [rows]="engagementSpecifics"
                   [columns]="engagementSpecificsGridColumns"
                   [headerHeight]="30" [footerHeight]="0" [rowHeight]="70"
                   [rowClass]="getEngagementSpecificsRowClass"
                   *ngIf="showReport(['engagementSpecifics'])">
    </ngx-datatable>

相关css：

.datatable-body-cell {
    @media print {
      page-break-inside: avoid;
    }
  }

  .datatable-body-cell-label {
    @media print {
      // allow text wrapping
      white-space: normal !important;
      page-break-inside: avoid;
    }
  }

Answer 1

我们需要块级元素来避免行裁剪：

@media print {
    ::ng-deep .datatable-scroll {
        display: block !important;
    }

    ::ng-deep .datatable-row-wrapper {
        display: block !important;
        break-inside: avoid;
    }
}

注意：page-break-inside是已弃用，请使用break-inside代替。