角材料表单元格数据包装

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;