CODEWITHSUNDEEP
cssangularangular-materialangular-material2angular-flex-layout
Quentin
Quentin

Reputation: 1933

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

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: enter image description here

And what I want: enter image description here

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

StackBlitz HERE

Thank you

Upvotes: 8

Views: 6859

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73761

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.

Upvotes: 13

Related Questions