如何将 Angular Material Card Title 做成一个内衬？

Question

我无法强迫mat-card-title保持在一行并切断多余的文本。

我已经尝试过下面的 css 类（text-oneline）。

<mat-card>
  <mat-card-header>
    <mat-card-title class="text-oneline">Heeeeeellllllloooo</mat-card-title>
    <mat-card-subtitle>World!</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image [src]="icon_url" alt="App Icon">
  <mat-card-content>
    <p>Some Text</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Hello</button>
  </mat-card-actions>
</mat-card>

<mat-card>
  <mat-card-header>
    <mat-card-title class="text-oneline">Heeeeeellllllloooo</mat-card-title>
    <mat-card-subtitle>World!</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image [src]="icon_url" alt="App Icon">
  <mat-card-content>
    <p>Some Text</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Hello</button>
  </mat-card-actions>
</mat-card>

现在，文本比卡片长。我希望文字停止而不是溢出卡片。我希望文本填满所有可用空间，但不要超过垫卡的宽度。

示例：https : //angular-mat-card-example-4cb2wk.stackblitz.io

解决方案：

代码由 ???? ？？？效果很好，但只有在 window.resize 被触发之后。我发现的简单解决方案是编辑mat-card-header.

.text-oneline {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Answer 1

我可以提供两种解决方案，其中一个我真的不想提供，但它是一个解决方案。

我建议您使用的解决方案是去除包装<mat-card-header>

<mat-card>
  <mat-card-title class="text-oneline">Heeeeeellllllloooo</mat-card-title>
  <mat-card-subtitle>World!</mat-card-subtitle>
  <img mat-card-image [src]="icon_url" alt="App Icon">
  <mat-card-content>
    <p>Some Text</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Hello</button>
  </mat-card-actions>
</mat-card>

这会稍微改变布局，但你可以通过添加自己的 css 类或用自己的 div 包装它来解决这个问题，只是不要使用，<mat-card-header>因为它做了一些不容易规避的事情，但也不是不可能像你一样请参阅我的第二个不那么推荐的解决方案。

在第二个解决方案中，您将.text-online类移至<mat-card-header>如下所示：

<mat-card>
  <mat-card-header class="text-oneline">
    <mat-card-title >Heeeeeellllllloooo</mat-card-title>
    <mat-card-subtitle>World!</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image [src]="icon_url" alt="App Icon">
  <mat-card-content>
    <p>Some Text</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Hello</button>
  </mat-card-actions>
</mat-card>

并且你的 css 更改为：

.text-oneline ::ng-deep * {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

我不建议您使用第二种解决方案！

使用 ::ng-deep 被认为是非常糟糕的做法，因为它已被弃用并且不应再使用，但截至目前 Angular 还没有提供替代方案。更多信息

Answer 2

将卡片包裹起来div并将 elementRef 设置为 div#card

然后将宽度设置为header卡片的宽度[style.width.px]="width - 50"

设置调整大小时的宽度参数(window:resize)="width=card.getBoundingClientRect().width"

查看工作代码

<div #card (window:resize)="width=card.getBoundingClientRect().width">
<mat-card>
  <mat-card-header>
    <mat-card-title class="text-oneline" [style.width.px]="width - 50">Heeeeeellllllloooo</mat-card-title>
    <mat-card-subtitle>World!</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image [src]="icon_url" alt="App Icon">
  <mat-card-content>
    <p>Some Text</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Hello</button>
  </mat-card-actions>
</mat-card>
</div>

CSS

.text-oneline {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}