如何截断Angular2中的文本？

Question

有没有办法可以将字符串的长度限制为数字字符？例如:我必须将标题长度限制为20 {{ data.title }}.

是否有管道或过滤器来限制长度？

Answer 1

将文本截断为角度的两种方法.

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: string[]): 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 {}

Answer 2

使用可选参数截断管道:

• limit - 字符串最大长度
• completeWords - 标记为截断最近的完整单词,而不是字符
• 省略号 - 附加的尾随后缀

-

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

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {
    if (completeWords) {
      limit = value.substr(0, limit).lastIndexOf(' ');
    }
    return value.length > limit ? value.substr(0, limit) + ellipsis : value;
  }
}

不要忘记添加模块条目.

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

用法

示例字符串:

public longStr = 'A really long string that needs to be truncated';

标记:

  <h1>{{longStr | truncate }}</h1> 
  <!-- Outputs: A really long string that... -->

  <h1>{{longStr | truncate : 12 }}</h1> 
  <!-- Outputs: A really lon... -->

  <h1>{{longStr | truncate : 12 : true }}</h1> 
  <!-- Outputs: A really... -->

  <h1>{{longStr | truncate : 12 : false : '***' }}</h1> 
  <!-- Outputs: A really lon*** -->

Answer 3

根据单词限制长度

如果您想根据单词而不是字符进行截断，同时还允许查看完整文本的选项，请尝试使用此方法。

来到这里寻找基于单词的Read More解决方案，分享Pipe我最终编写的自定义。

管道：

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

Answer 4

像这样：

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

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

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

Answer 5

您可以基于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 dummy 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>

注意：此代码对一行使用完整，但不能超过一个。

如果您想通过Angular做到，最好的是Ketan解决方案

Answer 6

这是使用interface来描述要通过pipe标记中传递的选项对象的形状的另一种方法。

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

Answer 7

正如您所要求的，使用切片管（角度的核心管）非常简单data.title：

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

来自 Angular 常见文档https://angular.io/api/common/SlicePipe

Answer 8

用省略号截断字符串

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

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