Text-overflow on <mat-table> using display-flex Angular

Question

I use Angular-Material mat-table Flex and I would like the extra content not to be displayed like this.

That's what I have:

And what I want:

I tried to use text-overflow: ellipsis, but it did not work if someone had an idea, I'm interested.

StackBlitz HERE

Thank you

Answer 1

You could put the text inside of a span element:

<mat-cell *matCellDef="let element" fxFlex="50">
  <span class="ellipsis">{{element.weight}}</span>
</mat-cell>

and apply the text-overflow styling on that element:

mat-cell > span.ellipsis {
   text-overflow: ellipsis; 
   overflow: hidden; 
   white-space: nowrap;
}

See this stackblitz for a demo.