text-overflow：mat-expansion-panel header中的省略号

Question

使用垫扩展面板显示可折叠的文本。唯一缺少的是css文本溢出应该提供的3个点：省略号样式。但是，这似乎不适用于mat-expansion-panel-header，如下图所示。

你可以在stackblitz看到我的代码：

https://stackblitz.com/edit/angular-4s7pfw?file=app/expansion-overview-example.html

Answer 1

我最近在类似的情况下工作，解决方案/解释如下：

首先，这种情况与我们需要省略号的情况相同，唯一的区别是mat扩展中的容器是display: flex;

为了使省略号工作，我们有两种方法：

1. Single line solution
2. 复杂的多线解决方案     技巧和使用:after，但我不喜欢这些解决方案，并将专注于带省略号的单行文本

材料扩展面板解决方案：

1. display: block;用于mat-panel-description，现有主题： Text overflow ellipsis dynamic width inside an angular material extension panel description
2. 保留display: flex并设置min-width: 0;以获取mat-expansion-panel-header-title，我非常喜欢这个解决方案。 现有主题：Ellipsis in flexbox container

所以我分叉你的代码并实现了我的建议。 https://angular-4s7pfw-wrmxo1.stackblitz.io

结果：