使用slice pipe (angular的核心管道)非常简单，就像你要求data.title一样:

{{ data.title | slice:0:20 }}

来自Angular通用文档https://angular.io/api/common/SlicePipe

根据单词限制长度

如果您想根据单词而不是字符进行截断，同时还允许一个选项查看完整的文本，可以试试这个方法。

来到这里寻找一个阅读更多的解决方案基于文字，分享自定义管道我最终写。

管:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'readMore'
})
export class ReadMorePipe implements PipeTransform {

  transform(text: any, length: number = 20, showAll: boolean = false, suffix: string = '...'): any {
    
    if (showAll) {
      return text;
    }

    if ( text.split(" ").length > length ) {
      
      return text.split(" ").splice(0, length).join(" ") + suffix;
    }

    return text;
  }

}

在模板:

<p [innerHTML]="description | readMore:30:showAll"></p>
<button (click)="triggerReadMore()" *ngIf="!showAll">Read More<button>

组件:

export class ExamplePage implements OnInit {

    public showAll: any = false;
    
    triggerReadMore() {
        this.showAll = true;
    }
    
}

在模块:

import { ReadMorePipe } from '../_helpers/read-more.pipe';

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}

我一直在使用这个模块ng2 truncate，它很简单，导入模块和u已经准备好了…在{{data。标题| truncate: 20}}

如果你想要截断一些单词并添加一个省略号，你可以使用这个函数:

truncate(value: string, limit: number = 40, trail: String = '…'): string {
  let result = value || '';

  if (value) {
    const words = value.split(/\s+/);
    if (words.length > Math.abs(limit)) {
      if (limit < 0) {
        limit *= -1;
        result = trail + words.slice(words.length - limit, words.length).join(' ');
      } else {
        result = words.slice(0, limit).join(' ') + trail;
      }
    }
  }

  return result;
}

例子:

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 5, '…')
> "Bacon ipsum dolor amet sirloin…"

来自: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

如果你想要截断一些字母，但不删减单词，请使用以下命令:

truncate(value: string, limit = 25, completeWords = true, ellipsis = '…') {
  let lastindex = limit;
  if (completeWords) {
    lastindex = value.substr(0, limit).lastIndexOf(' ');
  }
  return `${value.substr(0, limit)}${ellipsis}`;
}

例子:

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 19, true, '…')
> "Bacon ipsum dolor…"

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 19, false, '…')
> "Bacon ipsum dolor a…"

是这样的:

{{ data.title | slice:0:20 }}

如果你想要省略号，这里有一个变通方法

{{ data.title | slice:0:20 }}...

为了获得更多的灵活性，如果我们想从结尾或开始截断(基于@Nika Kasradze):

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {

  transform(value: string, args: any[]): string {
    const limit = args.length > 0 ? parseInt(args[1], 10) : 20;
    const trail = args.length > 1 ? args[3] : '...';
    return value.length > limit ? (args[2] === 'start' ? trail : '') + value.substr(args[0], limit) + (args[2] === 'end' ? trail : '') : value;
   }
}

如何使用?

{{ myLongText | truncate:[20, myLongText.length-20, 'start', '...'] }}