Angular Material 表单元格数据包装

Question

我正在使用 Angular Material 来显示表格数据。这只是部分代码。 table 内嵌 Material 卡。当字段的长度更长时，表格单元格中的数据会变得困惑。我附上了相同的截图

<mat-card-content fxLayout="column" fxLayoutAlign="space-between" fxFlex>
  <h4>Incidents</h4>
  <mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="IncidentId">
      <th mat-header-cell fxFlex *matHeaderCellDef mat-sort-header>IncidentId</th>
      <td mat-cell fxFlex *matCellDef="let element">{{ element.IncidentId }}</td>
    </ng-container>
    ...

这是它的外观:



我使用过自动换行，但没有帮助

相同的代码以以下格式出现在 IE 中

[ 2

Answer 1

这应该可以解决 Angular Material 表的包裹问题:

将此样式放入组件的 样式文件(.css 或 scss 或任何其他样式扩展名)

 td , th {
    white-space: normal;
    word-wrap: break-word;
    max-width: 200px;
}

您可以调整 最大宽度合你口味。它实际上对我有用 就我而言。