文本溢出：mat-expansion-panel 标题中的省略号

Question

使用 mat-expansion-panel 来显示可以折叠的文本。唯一缺少的是 css text-overflow: ellipsis 样式应提供的 3 个点。然而，这似乎在 mat-expansion-panel-header 中不起作用，如下图所示。

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

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

Answer 1

我最近正在研究类似的情况，解决方案/解释如下：

对于第一种情况，这种情况与我们需要省略号的任何情况相同，唯一的区别是 mat-expansion 中的容器是

display: flex;

要使省略号正常工作，我们有两种方法：

1. 单线解决方案
2. 复杂的多行解决方案 技巧和使用

   :after

   但我不喜欢这些解决方案，并将重点关注带有省略号的单行文本

材质扩展面板解决方案：

1. display: block;

   用于 mat-panel-description，现有主题： 角形材料扩展面板内的文本溢出省略号动态宽度描述
2. 保留它

   display: flex

   并为mat-expansion-panel-header-title设置

   min-width: 0;

   ，我非常喜欢这个解决方案。 现有主题：Flexbox 容器中的省略号

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

结果：

Answer 2

任何人都可以在 stackblitz 中提供工作解决方案，因为上面的链接不起作用