角度材料表单元格数据包装

Question

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

<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 材料表的包裹问题：

将此样式放在组件的样式文件（.css 或 scss 或任何其他样式扩展名）中

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

您可以根据自己的喜好调整最大宽度。在我的情况下，它实际上对我有用。

Answer 2

就目前我所记得的

fxLayout="column" fxLayoutAlign="space-between" fxFlex

fxFlex已弃用，fxLayout应该fxLayout="column wrap"

我想你有 overflow: hidden

您可以在该列上应用这些样式吗

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;