2

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

Want an ellipsis when expansion panel is collapsed

Peter Salomonsen
  • 5,525
  • 2
  • 24
  • 38

1 Answers1

3

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: enter image description here

Samuel Ayvazyan
  • 203
  • 3
  • 7