Angular Material Table cell not truncating long text

Question

I'm using Angular Material's table with Bootstrap's declarative css. Despite setting the width and max width on the table to be 100%, one column does not truncate text properly. This problem typically occurs when the width of the container is not set. What classes should I be applying on Material table to truncate long text.

<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 is user entered so it must be truncated eventually.

Stack blitz

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

Answer 1

I would recommend a pure CSS approach to this particular problem.

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

And on your component.html, you can simply add the CSS class to that cell.

<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>

This causes the string within the mat-cell to be contained within a single line, whereby its container has the overflow property set as hidden .

You may read more about the text-overflow property over here .

I have also forked a demo over here .