Angular Material 表单元格不会截断长文本

Question

我将 Angular Material 的表格与 Bootstrap 的声明性 CSS 结合使用。尽管将表格的宽度和最大宽度设置为 100%，但一列未正确截断文本。当未设置容器的宽度时，通常会出现此问题。我应该在 Material 表上应用什么类来截断长文本。

<div class="col flex-grow-1 min-height-0 m-0 p-0">
  <div class="h-100 overflow-auto">
    <table *ngIf="trunks | async as data" mat-table
           [dataSource]="data.entities"
           class="w-100">
      <ng-container matColumnDef="select">
        ... Checkbox logic
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>
             ... Header logic, this is much shorter than the offending name
          </ng-container>
        </th>
        <td mat-cell *matCellDef="let trunk" class="text-truncate">
          <div class="d-inline text-truncate">
            ... Status icon logic, width of < 40px
            <a [routerLink]="['./' + trunk.id]" [queryParams]="{}" queryParamsHandling="merge"
               class="text-truncate">{{ trunk.name }}</a>
          </div>
        </td>
      </ng-container>
      ... Other cells with short text
    </table>
  </div>
</div>

trunk.name 是用户输入的，因此最终必须将其截断。

堆栈 Blitz

https://stackblitz.com/edit/angular-c2menq?file=app/table-basic-example.css

Answer 1

我建议使用纯 CSS 方法来解决这个特定问题。

.truncate-cell {
  max-width: 60px; /* feel free to include any other value */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在您的 component.html 上，您只需将 CSS 类添加到该单元格即可。

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element" class="truncate-cell"> {{element.name }} </td>
</ng-container>

这会导致 mat-cell 中的字符串包含在一行中，因此其容器的 overflow 属性设置为 hidden。

您可以在 here 上阅读有关 text-overflow 属性的更多信息.

我还在 here 上 fork 了一个演示.