text-overflow: ellipsis in mat-expansion-panel header

Question

Using a mat-expansion-panel for displaying texts that can be collapsed. The only thing missing are the 3 dots that should be provided by the css text-overflow: ellipsis style. However this does not seem to work in the mat-expansion-panel-header as shown in the image below.

You can see my code here at stackblitz:

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

Answer 1

I was working recently on the similar situation and solution/explanation is following:

For the first, this situation is the same with any situation where we need to have ellipsis, only difference is that containers in mat-expansion are display: flex;

To make ellipsis working generally we have 2 ways:

1. Single line solution
2. Multiline solution with complicated tricks and using :after but I don't like these solutions and will focus on single line text with ellipsis

Solutions for Material Expansion panel:

1. display: block; for mat-panel-description, Existing topic: Text overflow ellipsis dynamic width inside an angular material extension panel description
2. Keep it display: flex and set min-width: 0; for mat-expansion-panel-header-title, I like this solution a lot. Existing topic: Ellipsis in flexbox container

So I forked your code and implemented my suggestion. https://angular-4s7pfw-wrmxo1.stackblitz.io

Result: