如何在 mat-card 中设置 mat-card-title 的样式答案

【问题标题】：How to style mat-card-title inside mat-card如何在 mat-card 中设置 mat-card-title 的样式
【发布时间】：2021-12-13 07:46:19
【问题描述】：

我想截断 mat 卡片标题以防溢出。使用

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

但是该样式被标准的 mat-card 样式覆盖。我也使用了 mat-card-header ::ng-deep ，但我认为现在不推荐使用 ng-deep 。有谁知道更好的方法吗？

【问题讨论】：

.mat-card-title 你可以使用这个类来设计样式。

标签： javascript html css angular frontend

【解决方案1】：

您可以覆盖类 css，而不是使用 ng deep。

转到主 css 文件 common/style 并从浏览器检查您的材质类。

使用您从浏览器中找到的完整类名。

应用 css，保存并运行。

【讨论】：

【解决方案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;
}

您必须为文本溢出省略号指定宽度，谢谢

【讨论】：