文本溢出：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. Single line solution
2. 复杂的多行解决方案 技巧和使用:after，但我不喜欢这些解决方案，并将专注于带有省略号的单行文本

Material Expansion 面板解决方案：

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

结果：