用省略号截断字符串

不需要任何额外的管道，你可以使用切片。

{{ stringText | slice: 0:25}} {{ stringText.length > 25 ? '...' : ''}}

您可以根据CSS截断文本。它有助于根据宽度截断文本，而不是固定字符。

例子

CSS

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

.content {
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML

<div class="content">
    <span class="truncate">Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
</div>

注意:这段代码一行使用full，而不是多行。

如果你想用Angular来做，那么Ketan的解决方案是最好的

下面是另一种方法，使用接口来描述要通过标记中的管道传递的选项对象的形状。

@Pipe({
  name: 'textContentTruncate'
})
export class TextContentTruncatePipe implements PipeTransform {

  transform(textContent: string, options: TextTruncateOptions): string {
    if (textContent.length >= options.sliceEnd) {
      let truncatedText = textContent.slice(options.sliceStart, options.sliceEnd);
      if (options.prepend) { truncatedText = `${options.prepend}${truncatedText}`; }
      if (options.append) { truncatedText = `${truncatedText}${options.append}`; }
      return truncatedText;
    }
    return textContent;
  }

}

interface TextTruncateOptions {
  sliceStart: number;
  sliceEnd: number;
  prepend?: string;
  append?: string;
}

然后在你的标记中:

{{someText | textContentTruncate:{sliceStart: 0, sliceEnd: 50, append: '...'} }}

根据单词限制长度

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

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

管:

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

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

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

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

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