两种方法将文本截断成角。

let str = 'How to truncate text in angular';

1. 解决方案

  {{str | slice:0:6}}

输出:

   how to

如果你想在切片字符串之后追加任何文本，比如

   {{ (str.length>6)? (str | slice:0:6)+'...':(str) }}

输出:

 how to...

2. 解决方案(创建自定义管道)

如果要创建自定义截断管道

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[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';
    return value.length > limit ? value.substring(0, limit) + trail : value;
   }
}

在标记

{{ str | truncate:[20] }} // or 
{{ str | truncate:[20, '...'] }} // or

不要忘记添加一个模块条目。

@NgModule({
  declarations: [
    TruncatePipe
  ]
})
export class AppModule {}

两种方法将文本截断成角。

let str = 'How to truncate text in angular';

1. 解决方案

  {{str | slice:0:6}}

输出:

   how to

如果你想在切片字符串之后追加任何文本，比如

   {{ (str.length>6)? (str | slice:0:6)+'...':(str) }}

输出:

 how to...

2. 解决方案(创建自定义管道)

如果要创建自定义截断管道

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[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';
    return value.length > limit ? value.substring(0, limit) + trail : value;
   }
}

在标记

{{ str | truncate:[20] }} // or 
{{ str | truncate:[20, '...'] }} // or

不要忘记添加一个模块条目。

@NgModule({
  declarations: [
    TruncatePipe
  ]
})
export class AppModule {}

您可以根据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的解决方案是最好的

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

是这样的:

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

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

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