How to style mat-card-title inside mat-card

Question

I wanted to truncate mat card title for overflow. Using

overflow:hidden 
text-overflow:ellipsis
white-space: nowrap

But the style is overriden by the standard mat-card style. I used mat-card-header ::ng-deep for the same but I think ng-deep is deprecated now. Does anyone know of a better approach for the same?

Answer 1

=> Instead of using the ng deep , you can override the class css .

=> go to the main css file common/ style .css inspect your material class from browser like

. "use the full class name which you found from browser" {

// apply the css

}

=> save and run .

Answer 2

This might help:

<mat-card class="example-card">
    <mat-card-header>
    <mat-icon>more_vert</mat-icon>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title title="This is a test title header">This is a test title header</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
</mat-card>

and you can override the css class in your component ie your component is (app.component.css):

.mat-card-title {
  overflow:hidden ;
  text-overflow:ellipsis;
  white-space: nowrap;
  width: 30vw;
}

You must need to specify width for text overflow ellipsis, Thanks