ionic-framework - 如何在 Ionic 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>

在 .ts 文件中：

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

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

希望这可以帮助。