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

问题

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

回答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.

回答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.

来源：https://stackoverflow.com/questions/48439658/text-overflow-ellipsis-dynamic-width-inside-an-angular-material-extension-panel

标签

css

angular-material2