如何在描述后显示三个点？

Question

我使用文本换行以多行显示文本。当文本大于一行时，我想显示三个点。

<ion-item text-wrap *ngIf="list.STATUS=='ACTIVE'" style="padding-left:30px;padding-right:30px;">
      <div (click)="list.isExpanded = !list.isExpanded" [style.height]="list.isExpanded?'auto':'20px'">
        <p style="color: #9DA4AB;font-size: 15px;">{{list.TASKDESC}}</p>
        <hr>
        <p style="color: #9DA4AB;font-size: 10px;">{{list.DEADLINE_DT}}</p>
      </div>

    </ion-item>

点击之前

点击后

Answer 1

<强> html的

<ion-item text-wrap *ngIf="list.STATUS=='ACTIVE'" style="padding-left:30px;padding-right:30px;">
      <div (click)="list.isExpanded = !list.isExpanded" [style.height]="list.isExpanded?'auto':'20px'">

        <p [class.isCollapsed]="!list.isExpanded">{{list.TASKDESC}}</p>

        <hr>
        <p>{{list.DEADLINE_DT}}</p>
      </div>
</ion-item>

<强> .scss

.isCollapsed{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}