我想将text-overflow: ellipsis;
应用于mat-panel-description的mat-expansion-panel:
.mat-expansion-panel-header-description {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
当溢出被隐藏时,没有省略号。请查看this stackblitz的以下截图:
防止换行是有意为之的,因为我不希望描述文字换到第二行。长网址也是有意的:
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Panel Title
</mat-panel-title>
<mat-panel-description>
https://stackblitz.com/edit/angular-gsxyhn?file=app%2Fexpans ion-overview-example.html
</mat-panel-description>
</mat-expansion-panel-header>
</mat-expansion-panel>
</mat-accordion>
display: inline-block;
,它似乎可以正常工作(请参见此Stackblitz)。 - ConnorsFan