如何截断Angular2中的文本？

Posted 2023-02-22

【中文标题】如何截断Angular2中的文本？

【英文标题】：How to truncate text in Angular2?

【发布时间】：2017-11-23 23:00:42

【问题描述】：

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

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

【参考方案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: 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 

【讨论】：

哪个方案的性能好。方案一还是方案二。我觉得方案一的性能不错。

您可能想在 return 语句中添加一个空检查，在我的情况下，我传入了一个空字符串，这导致我的应用程序崩溃。 return value && value.length > limit ? value.substring(0, limit) + trail : value;

@ketan：先生，我已经尝试了两种解决方案，但我的情况不同，我们最初显示 50 个字符，点击阅读更多链接后将显示更多文本，所以告诉我上面的可能吗？

在解决方案 2 中，transform(value: string, args: string[]): string 应该是 transform(value: string, args: any[]): string，因为给管道的第一个参数是一个数字。

嗨 Ketan，你能回答这个问题吗：***.com/questions/61040964/…

【参考方案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*** -->

【讨论】：

感谢您提供管道，limit = value.substr(0, 13).lastIndexOf(' '); 应该是 limit = value.substr(0, limit).lastIndexOf(' ');。

您也可以添加类似的内容：if (!value) return ''; 和 if (value.length <= limit) return value;

我还必须将它添加到@ngModule 的导出部分才能使其正常工作。不知道为什么

为避免将省略号附加到不必要的值上，请添加使用 ` if (value.length $value.substr(0, limit)$ellipsis; `

谢谢，很有帮助！但是在两种情况下失败：（a）一个单词串（字符串中没有空格）和（b）一个超出限制的单词串。在这两种情况下都只返回'...'

【参考方案3】：

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

【讨论】：

这个。一千倍！

完美的辅助功能

【参考方案4】：

像这样：

 data.title | slice:0:20 

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

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

【讨论】：

即使data.title 没有被截断，三个点也不会出现吗？

是的。此解决方案假设它将始终被截断

如果这适用于所有类型的被截断的文本，则可以实现更通用的解决方案

确认这适用于 Angular v11。

【参考方案5】：

根据单词限制长度

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

来到这里寻找基于文字的阅读更多解决方案，分享自定义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 

【讨论】：

知道如何在 ngFor 循环中运行它。当点击阅读更多一次可见的所有循环内容时，它看起来像它。

@Santosh 您可以更新 triggerReadMore() 函数以使用父或兄弟关系专门针对节点

变量仍然是全局的。不起作用。然而，我创建了一个对象并将每个 id 存储为布尔值。有效。无论如何，谢谢您的回复。 :)

很高兴您解决了这个问题。不客气。

【参考方案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: '...' 

【参考方案7】：

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

 data.title | slice:0:20 

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

【参考方案8】：

我一直在使用这个模块ng2 truncate，它非常简单，导入模块和你准备好了...在 data.title |截断：20

【讨论】：

移到这里：npmjs.com/package/@yellowspot/ng-truncate

我的测试在导入后失败了。开玩笑有一些接线错误。

@tibi 什么样的错误？对我来说这很简单，安装 > 在模块中导入 > 在其组件中使用..

【参考方案9】：

如果您想截断字数并添加省略号，您可以使用此功能：

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

【参考方案10】：

刚刚尝试@Timothy Perez 的回答并添加了一行

if (value.length < limit)
   return `$value.substr(0, limit)`;

到

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

@Pipe(
  name: 'truncate'
)
export class TruncatePipe implements PipeTransform 
transform(value: string, limit = 25, completeWords = false, ellipsis = '...') 

   if (value.length < limit)
   return `$value.substr(0, limit)`;

   if (completeWords) 
     limit = value.substr(0, limit).lastIndexOf(' ');
   
   return `$value.substr(0, limit)$ellipsis`;

【参考方案11】：

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:'>>>']