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;
}

Solution 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.

Solution 2

This isn't really an Angular issue, but rather a CSS one.

Let me explain to you how the text-overflow works :

First, you need to declare a container. This container will have a max-width or max-height property, and won't allow the overflow to be displayed.

Next, you will have you text container. This container will say that the text should display an ellipsis when overflown. But it also needs to say that the text must be on one line only, because otherwise, the overflown text will break into a new line.

Here is the stackblitz to show what I'm explaining.

Comments

[Viktor Eriksson]

I have updated the link. I Think removing the flex will distrupt the title-description relation.

[Viktor Eriksson]

Sorry about that, I did try it but I did it in our own code and in our own code we had a wrapping div(with flex) inside the header, wrapping title and description. So setting display:block on the panel-description did not help us, until we removed the wrapper. Thank you very much !

[Nyerguds]

Was looking for a solution on this same issue on mat-checkbox, but no dice; the main control is already block, and the issue is caused by it using flex for the label internally. But the label isn't any kind of sub-element that can be overridden, so there's no fix...