角度材料表单元格不会截断长文本

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 是用户输入的，所以它最终必须被截断。

堆叠闪电战

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。

您可以text-overflow在此处阅读有关该物业的更多信息。

我也在这里分叉了一个演示。