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。

您可能会在here上进一步了解text-overflow属性。

我还通过here分了一个演示。

Angular Material Table单元格不截断长文本

1 个答案: