如何在 mat-card 內設置 mat-card-title 樣式

Question

我想為溢出截斷墊卡標題。 使用

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

但是該樣式被標准的 mat-card 樣式覆蓋。 我使用 mat-card-header ::ng-deep 同樣，但我認為 ng-deep 現在已被棄用。 有沒有人知道更好的方法？

Answer 1

=> 您可以覆蓋類 css ，而不是使用 ng deep 。

=> 轉到主 css 文件 common/style .css 從瀏覽器中檢查您的材料類，例如

. “使用您從瀏覽器中找到的完整類名”{

// 應用css

}

=> 保存並運行。

Answer 2

這可能有幫助：

<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>

並且您可以覆蓋組件中的 css 類，即您的組件是 (app.component.css)：

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

您必須需要為文本溢出省略號指定寬度，謝謝