为了获得更多的灵活性，如果我们想从结尾或开始截断(基于@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', '...'] }}

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

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…"

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

@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: '...'} }}

为了获得更多的灵活性，如果我们想从结尾或开始截断(基于@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', '...'] }}

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

@Pipe({
  name: 'truncate',
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number, trail = '...'): string {
    if (value.length <= limit) {
      return value;
    }

    return value.substring(0, limit - trail.length).replace(/\s+$/, '') + trail;
  }
}

{{ str | truncate: 20 }}
{{ str | truncate: 20:'>>>'] }}

如果需要用单词截断:

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

@Pipe({
  name: 'truncateByWords',
})
export class TruncateByWordsPipe implements PipeTransform {
  transform(value: string, limit: number, trail = '...'): string {
    if (value.length <= limit) {
      return value;
    }

    const substr = value.substring(0, limit - trail.length).split(' ');
    const isLastWordFull = value
      .split(' ')
      .find(w => w === substr[substr.length - 1]);

    if (isLastWordFull) {
      return substr.join(' ') + trail;
    }

    return substr.slice(0, -1).join(' ') + trail;
  }
}

{{ str | truncateByWords: 20 }}
{{ str | truncateByWords: 20:'>>>'] }}

是这样的:

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

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

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