Come troncare il testo in Angular2?


126

C'è un modo per limitare la lunghezza della stringa a un numero di caratteri? ad esempio: devo limitare la lunghezza di un titolo a 20 {{ data.title }}.

C'è qualche tubo o filtro per limitare la lunghezza?

Risposte:


380

Due modi per troncare il testo in angolare.

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

1. Soluzione

  {{str | slice:0:6}}

Produzione:

   how to

Se vuoi aggiungere del testo dopo una stringa di slice come

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

Produzione:

 how to...

2. Soluzione (crea pipe personalizzate)

se vuoi creare pipe troncate personalizzate

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

In Markup

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

Non dimenticare di aggiungere una voce di modulo.

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

Quale soluzione è buona in termini di prestazioni. Soluzione 1 o 2. Penso che la soluzione 1 sia buona in termini di prestazioni.
Rigin Oommen

potresti voler aggiungere un controllo nullo all'istruzione return, nel mio caso stavo passando una stringa vuota e la mia app si bloccava. return value && value.length > limit ? value.substring(0, limit) + trail : value;
Wildhammer

@ketan: signore, ho provato entrambe le soluzioni funzionano perfettamente ma il mio scenario è diverso, abbiamo inizialmente mostrato 50 caratteri e più testo verrà mostrato dopo aver fatto clic su leggi altro link quindi dimmi che è possibile con sopra?
Kapil soni

Nella soluzione 2, transform(value: string, args: string[]): stringdovrebbe essere transform(value: string, args: any[]): stringpoiché il primo argomento fornito alla pipe è un numero.
MattOnyx

Ciao Ketan, ti invitiamo a rispondere a questo: stackoverflow.com/questions/61040964/...
Tanzeel

83

Tronca tubo con parametri opzionali :

  • limit - lunghezza massima della stringa
  • completeWords - Flag per troncare alla parola completa più vicina, anziché al carattere
  • puntini di sospensione - suffisso finale aggiunto

-

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

Non dimenticare di aggiungere una voce di modulo.

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

uso

Stringa di esempio:

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

7
Grazie per aver fornito una pipa, limit = value.substr(0, 13).lastIndexOf(' ');dovrebbe essere limit = value.substr(0, limit).lastIndexOf(' ');però.
Tomnar

1
Puoi anche aggiungere qualcosa del genere: if (!value) { return ''; }e if (value.length <= limit) { return value; }
Jarek Szczepański

Ho dovuto aggiungerlo anche alla parte di esportazione di @ngModule per farlo funzionare. non so perché
tibi

@tibi è come un nuovo componente e devi dichiararlo (array di dichiarazioni) per usarlo.
calios

1
Per evitare di aggiungere puntini di sospensione a valori non necessari aggiungere use `if (value.length <limit) {return value; } altro {ritorno ${value.substr(0, limit)}${ellipsis}; } `
jabu.hlong

15

Puoi troncare il testo in base al CSS. Aiuta a troncare un carattere basato sulla larghezza e non a correggere.

Esempio

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>

Nota: questo codice usa pieno per una riga non per più di una.

La soluzione di Ketan è la migliore se vuoi farlo da Angular


2
Questo. Mille volte questo!
brunner

perfetto per l'Accessibilità
Antonello Pasella

4

Ho usato questo modulo ng2 truncate , è abbastanza semplice, import module e sei pronto per partire ... in {{data.title | truncate: 20}}



i miei test non sono riusciti dopo aver importato questo. scherzo aveva alcuni errori cablati.
tibi

@tibi che tipo di errori? per me è stato molto semplice, installa> importa nel modulo> usa nei suoi componenti ..
Kerim092

3

Ecco un approccio alternativo che utilizza un interfaceper descrivere la forma di un oggetto opzioni da passare tramite pipenel markup.

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

Quindi nel tuo markup:

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


1

Se vuoi troncare di un numero di parole e aggiungere un'ellissi puoi usare questa funzione:

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

Esempio:

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

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

Se vuoi troncare di un numero di lettere ma non tagliare le parole, usa questo:

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

Esempio:

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

Ho appena provato la risposta di @Timothy Perez e ho aggiunto una riga

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

per

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

Prova questo, se desideri troncare in base alle parole anziché ai caratteri, consentendo anche un'opzione per vedere il testo completo.

Sono venuto qui alla ricerca di una soluzione Read More basata sulle parole , condividendo l'usanza che Pipeho finito per scrivere.

Tubo:

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

}

Nel modello:

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

Componente:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

Nel modulo:

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

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.