Comment tronquer du texte dans Angular2?


126

Existe-t-il un moyen de limiter la longueur de la chaîne à un nombre de caractères? par exemple: je dois limiter la longueur d'un titre à 20 {{ data.title }}.

Y a-t-il un tuyau ou un filtre pour limiter la longueur?

Réponses:


380

Deux façons de tronquer le texte en angulaire.

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

1. Solution

  {{str | slice:0:6}}

Production:

   how to

Si vous souhaitez ajouter du texte après la chaîne de tranche comme

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

Production:

 how to...

2. Solution (Créer un tube personnalisé)

si vous souhaitez créer un tube tronqué personnalisé

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

Dans le balisage

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

N'oubliez pas d'ajouter une entrée de module.

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

Quelle solution est bonne en performance. Solution 1 ou solution 2. Je pense que la solution 1 est bonne en termes de performances.
Rigin Oommen

vous voudrez peut-être ajouter une vérification nulle à l'instruction return, dans mon cas, je passais une chaîne vide et cela provoquait le plantage de mon application. return value && value.length > limit ? value.substring(0, limit) + trail : value;
Wildhammer

@ketan: Monsieur, j'ai essayé les deux solutions, cela fonctionne parfaitement, mais mon scénario est différent, nous avons initialement montré 50 caractères et plus de texte sera affiché après le clic Lire plus de lien alors dites-moi que c'est possible avec ci-dessus?
Kapil soni le

Dans la solution 2, cela transform(value: string, args: string[]): stringdevrait être transform(value: string, args: any[]): stringpuisque le premier argument donné au tube est un nombre.
MattOnyx le

Salut Ketan, pouvez-vous s'il vous plaît répondre à ceci: stackoverflow.com/questions/61040964/…
Tanzeel

83

Tronquer le tuyau avec des paramètres facultatifs :

  • limit - longueur maximale de la chaîne
  • completeWords - Indicateur pour tronquer au mot complet le plus proche, au lieu du caractère
  • points de suspension - suffixe de fin ajouté

-

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

N'oubliez pas d'ajouter une entrée de module.

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

Usage

Exemple de chaîne:

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

Balisage:

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

7
Merci de fournir un tuyau, limit = value.substr(0, 13).lastIndexOf(' ');devrait être limit = value.substr(0, limit).lastIndexOf(' ');cependant.
Tomnar le

1
Vous pouvez également ajouter quelque chose comme ça: if (!value) { return ''; }et if (value.length <= limit) { return value; }
Jarek Szczepański

J'ai dû l'ajouter également à la partie export de @ngModule pour le faire fonctionner. Je ne sais pas pourquoi
tibi

@tibi c'est comme un nouveau composant et vous devez le déclarer (tableau de déclarations) pour pouvoir l'utiliser.
calios

1
Pour éviter d'ajouter des points de suspension à des valeurs inutiles, ajoutez utilisez `if (value.length <limit) {return value; } else {retour ${value.substr(0, limit)}${ellipsis}; } `
jabu.hlong

15

Vous pouvez tronquer du texte basé sur CSS. Il permet de tronquer un texte basé sur la largeur et non le caractère fixe.

Exemple

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>

Remarque: ce code utilise plein pour une ligne pas pour plus d'une.

La solution de Ketan est la meilleure si vous voulez le faire par Angular


2
Ce. Mille fois ça!
brunner

parfait pour l'accessibilité
Antonello Pasella le

4

J'ai utilisé ce module ng2 truncate , son module d'importation assez simple et vous êtes prêt à partir ... dans {{data.title | tronquer: 20}}



mes tests ont échoué après l'importation. jest avait des erreurs câblées.
tibi

@tibi quel genre d'erreurs? pour moi c'était très simple, installer> importer dans le module> utiliser dans ses composants ..
Kerim092

3

Voici une approche alternative utilisant un interfacepour décrire la forme d'un objet d'options à passer via le pipedans le balisage.

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

Puis dans votre balisage:

{{someText | textContentTruncate:{sliceStart: 0, sliceEnd: 50, append: '...'} }}


1

Si vous souhaitez tronquer par un certain nombre de mots et ajouter des points de suspension, vous pouvez utiliser cette fonction:

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

Exemple:

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

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

Si vous voulez tronquer par un certain nombre de lettres mais ne coupez pas les mots, utilisez ceci:

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

Exemple:

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

1

Je viens d'essayer la réponse @Timothy Perez et j'ai ajouté une ligne

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

0

Essayez celui-ci, si vous souhaitez tronquer en fonction de mots au lieu de caractères tout en permettant également à une option de voir le texte complet.

Je suis venu ici à la recherche d'une solution Read More basée sur des mots , partageant la coutume que Pipej'ai fini par écrire.

Tuyau:

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

}

Dans le modèle:

<p [innerHTML]="description | readMore:30:showAll"></p>
<button (click)="triggerReadMore()" *ngIf="!showAll">Read More<button>

Composant:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

Dans le module:

import { ReadMorePipe } from '../_helpers/read-more.pipe';

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.