CSS-如何使Angular Material Card Title成为一种衬板？

我无法强制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;
}

最佳答案

将您的卡片包装在div中,然后将elementRef设置为div作为#card

然后将标题的宽度设置为卡的宽度[style.width.px] =“ width-50”

在调整大小时设置宽度参数(window：resize)=“ width = card.getBoundingClientRect().width”

See working code

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