Text overflow ellipsis dynamic width inside an angular material extension panel description

Question

I want to display a description in a mat-panel-description that when overflowed shows the ellipsis-dots. I would like to be able to resize the window and the bigger the window the more I want to see of the text and the smaller the window the less I want to see.

Here is a stackblitz: https://stackblitz.com/edit/angular-guszs6

HTML:

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
</mat-accordion>

CSS:

mat-panel-description{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  width: 100%;
}
mat-panel-title{
  white-space:nowrap;
}

Answer 1

I can't do a code snippet for you, because on the link you gave us there is more css properties than you gave us here, but the problem is that your mat-panel-description has display: flex; on it.

Override it with display: block;.

For you comment below :

No, everything is okay, my fork of yours :

https://stackblitz.com/edit/angular-guszs6-dxcudt?file=styles.css

Just add this on your style.css

mat-panel-description {
   display: block !important;
}

I gave you how to achieve it, and you hadn't try ... It would have took you less time to try than to comment my answer.