css - 如何使 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>

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

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

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

解决方法:

לבני מלכה 的代码效果很好，但只有在触发 window.resize 之后。我找到的简单解决方案是编辑 mat-card-header。

mat-card-header {
  display: flow-root;
}

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 还没有提供替代方案。 More info