Как усечь строку с переключателем в Ioni c 5

Question

Как я могу обрезать свой абзац, чтобы показать только определенное количество слов, и иметь ссылку «показать больше», которая открывает остальную часть абзаца на той же странице?

В моем page.ts файл У меня есть массив, заполненный этим кодом:

slides = [
  { 
    paragraph:'a very long long long long paragraph '

  },
  {

    paragraph:'very long long long long paragraph'
  },
  {

    paragraph:'very long long long long paragraph'
  }
];

В моем HTML файле у меня есть этот код, чтобы показать его:

<ion-slides [options]="slideOpts" pager="true">
  <ion-slide *ngFor="let slide of slides">
 <div>
  <ion-card> 
  <ion-card-content>
   <br>
    <h4> {{ slide.paragraph }} </h4>

  </ion-card-content>
</ion-card>
</div>

  </ion-slide>

Answer 1

Вы можете использовать css трюк для решения этой проблемы

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

<h4 class="customStyle"> abc... </h4>

Answer 2

Вы можете использовать эту библиотеку @ yellowspot / ng-truncate

Затем в вашем файле html:

<p *ngIf="isFull[i] === true">{{slide.paragraph}} <span (click)="toggleMore(i)">.. see less</span></p>
<p *ngIf="isFull[i] === false">{{slide.paragraph | truncate :100: "..."}} <span *ngIf="slide.paragraph.length > 100" (click)="toggleMore(i)">see more</span></p>

In .ts:

getData(){
    for(let i=0; i<this.slides.length; i++){
      this.isFull.push(false);
    }
}

toggleMore(i){
  this.isFull[i] = !this.isFull[i];
}

Надеюсь, это поможет.