角材料表单元数据包装

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;