ngx-datatable 行中的换行文本在打印视图中被截断

Question

我覆盖了 ngx-datatabledatatable-body-cell-label类的 css，以允许内容在打印时换行。然而，作为一个不受欢迎的副作用，当分页时，换行的文本会被切断。我尝试通过添加page-break-inside: avoid;' to the css for both thedatatable-body-cell anddatatable-body-cell-label` 类来解决此问题，但无济于事。

模板中的 ngx-datatable：

    <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。