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