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?
Instead of using the ng deep, you can override the class css.
Go to the main css file common/style and inspect your material class from browser.
Use the full class name which you found from browser.
Apply the css, save and run.
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 i.e. 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