小编Son*_*nul的帖子

默认情况下，如果Angular Material Table从包含它的单元格中溢出，则将内容放在下面的新行中。我试图对其进行设置，以使溢出的文本被截断为“ ...”。我现在拥有的代码不会截断内容并将其显示在一行中，直到它从父级溢出为止<div>

我之所以使用<table mat-table>而不是<mat-table>因为它具有根据Angular Material网站中所述的内容根据内容调整大小的列。我尝试创建的表具有响应能力，并根据其父级的大小调整自身大小<div>

HTML：

<div class="table-content">
  <table mat-table [dataSource]="dataSource" class="table-container">
    <ng-container [matColumnDef]="item" *ngFor="let item of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>{{item}} </th>
      <td mat-cell *matCellDef="let element">
        <div class="table-data-content">
          <span>{{element[item]}}</span>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS：

.table-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.table-data-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

角度组件中使用的示例数据：

  dataSource = [
    { Name: "Some file …