How to truncate text in an Angular Material UI table cell

Working on a recent project using Angular and Material UI, I needed to be able to truncate the text in one of the cells of a Material table. Here is the simplest way I have found to accomplish that.

//Add this to your css
mat-cell > span.truncate-text {
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
}

//Wrap the long text in a span with a class of truncate-text

<ng-container matColumnDef="longtext">
  <mat-header-cell *matHeaderCellDef> LongText </mat-header-cell>
  <mat-cell *matCellDef="let element">
    <span class="truncate-text">{{element.longtext}}</span>
  </mat-cell>
</ng-container>