説明後に3つのドットを表示する方法は？

Question

私は複数行にテキストを表示するためにテキストラップを使用しました。私は、テキストが1行よりも大きいときに3つの点を表示したい。クリックする前に

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