Angular Material テーブルで省略記号を使用する 質問する

デフォルトでは、Angular Material Table は、コンテンツがセルからあふれた場合、そのコンテンツを新しい行に表示します。私は、あふれたテキストが「...」で切り捨てられるように設定しようとしています。現在使用しているコードでは、コンテンツは切り捨てられず、親からあふれ出るまで 1 行で表示されます。<div>

<table mat-table>の代わりにを使用するのは<mat-table>、 で説明されているように、コンテンツに基づいてサイズが調整される列があるためです。Angular マテリアル ウェブサイト私が作成しようとしているテーブルはレスポンシブで、親のサイズに基づいてサイズが変更されます<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>

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

  dataSource = [
    { Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'},
    { Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'}
  ];

  displayedColumns = ['Name', 'Date', 'Uploader'];

td {
max-width: 0px;
}