Quería truncar el título de la tarjeta mat por desbordamiento. Usando
overflow:hidden text-overflow:ellipsis white-space: nowrapPero el estilo es anulado por el estilo estándar de la tarjeta mat. Usé mat-card-header ::ng-deep para lo mismo, pero creo que ng-deep está obsoleto ahora. ¿Alguien sabe de un mejor enfoque para el mismo?
En lugar de usar ng deep, puede anular la clase css.
Vaya al archivo css principal common/style e inspeccione su clase de material desde el navegador.
Use el nombre completo de la clase que encontró en el navegador.
Aplicar el css, guardar y ejecutar.
Esto podría ayudar:
<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>y puede anular la clase css en su componente, es decir, su componente es (app.component.css):
.mat-card-title { overflow:hidden ; text-overflow:ellipsis; white-space: nowrap; width: 30vw; }Debe especificar el ancho para los puntos suspensivos de desbordamiento de texto, gracias