web-dev-qa-db-fra.com

Comment tronquer du texte dans Angular2?

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

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

angularangular2-template
63
him

Deux façons de tronquer le texte en angulaire. 

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

1. Solution 

  {{str | slice:0:6}}

Sortie:

   how to

Si vous souhaitez ajouter du texte après la chaîne de tranche, par exemple 

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

Sortie:

 how to...

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

si vous voulez créer un tuyau tronqué personnalisé

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

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 {}
206
Ketan Akbari

Tronquer le tuyau avec les paramètres optional: 

  • limite - longueur maximale de la chaîne
  • completeWords - Indicateur à tronquer au mot complet le plus proche, au lieu du caractère
  • Ellipsis - 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.substr(0, limit)}${Ellipsis}`;
  }
}

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

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

Utilisation

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*** -->
45
Timothy Perez

Vous pouvez tronquer du texte basé sur css. son aide pour tronquer un texte basé sur la largeur ne fixe pas le caractère.

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

Remarque: ce code utilise plein pour une ligne.

La solution de Ketan est préférable si vous voulez le faire par Angular

3
Shailesh Ladumor

J'utilise ce module ng2 truncate , c'est assez facile, le module d'importation et vous êtes prêt à partir ... dans {{data.title | tronquer: 20}} 

2
Kerim092

Si vous voulez tronquer d'un nombre de mots et ajouter un Ellipsis, 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…"

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

Si vous voulez tronquer d'un 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
Gianfranco P.

Juste essayé @ Timothy Perez répondre et a 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
unos baghaii