Wie wird der Text in Angular2 abgeschnitten?

Zwei Möglichkeiten, um Text in eckig zu schneiden. 

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

1. Lösung

  {{str | slice:0:6}}

Ausgabe:

   how to

Wenn Sie einen Text nach dem Slice-String wie anfügen möchten

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

Ausgabe:

 how to...

2. Lösung (Benutzerdefiniertes Rohr erstellen)

wenn Sie eine benutzerdefinierte Pipe erstellen möchten

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

In Markup

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

Vergessen Sie nicht, einen Moduleintrag hinzuzufügen.

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

Pipe mit optionalen -Parametern abschneiden: 

• limit - maximale Länge der Zeichenfolge
• completeWords - Flag, die anstelle des Zeichens am nächsten vollständigen Word abgeschnitten wird
• Ellipsis - angehängtes nachstehendes Suffix

-

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.substr(0, limit)}${Ellipsis}`;
  }
}

Vergessen Sie nicht, einen Moduleintrag hinzuzufügen.

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

Verwendungszweck

Beispielstring:

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

Markup:

  <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*** -->

Sie können Text basierend auf CSS kürzen. Es ist hilfreich, einen Text basierend auf der Breite und nicht dem festgelegten Zeichen abzuschneiden.

Beispiel

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>

Hinweis: Dieser Code ist für eine Zeile voll.

Ketans Lösung ist am besten, wenn Sie es von Angular tun möchten

Ich habe dieses Modul ng2 truncate verwendet, es ist ziemlich einfach, das Importmodul und Sie sind bereit zu gehen ... in {{data.title | abschneiden: 20}} 

Wenn Sie mit Anzahl der Wörter abschneiden und eine Ellipsis hinzufügen möchten, können Sie diese Funktion verwenden:

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

Beispiel:

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 5, '…')
> "Bacon ipsum dolor amet sirloin…"

entnommen aus: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

Wenn Sie um ein Anzahl der Buchstaben abschneiden möchten, Wörter jedoch nicht ausschneiden, verwenden Sie Folgendes:

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}`;
}

Beispiel:

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

Ich habe gerade versucht @Timothy Perez zu antworten und eine Zeile hinzugefügt 

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

zu 

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}`;
}
}