用省略号截断字符串

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

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

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

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

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

是这样的:

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

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

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

您可以根据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: '...'} }}