truncate angular 4

¿Cómo truncar texto en Angular2?

Question

¿Hay alguna manera de limitar la longitud de la cadena a un número de caracteres? por ejemplo: tengo que limitar la longitud de un título a 20 {{ data.title }} .

¿Hay alguna tubería o filtro para limitar la longitud?

Answer 1

Dos formas de truncar el texto en angular.

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

1. Solución

  {{str | slice:0:6}}

Salida:

   how to

Si desea agregar cualquier texto después de la cadena de corte como

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

Salida:

 how to...

2. Solución (Crear tubería personalizada)

si desea crear una tubería truncada personalizada

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

En marcado

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

No olvide agregar una entrada de módulo.

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

Answer 2

Acabo de probar la respuesta de @Timothy Perez y agregué una línea

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

a

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

Answer 3

He estado usando este módulo ng2 truncado , es bastante fácil, importar módulo y estás listo para comenzar ... en {{data.title | truncar: 20}}

Answer 4

Puede truncar texto basado en css. Su ayuda para truncar un texto basado en el ancho no corrige el carácter.

Ejemplo

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>

Nota: este código se usa completo para una línea.

La solución de Ketan es mejor si quieres hacerlo con Angular

Answer 5

Si desea truncar por varias palabras y agregar puntos suspensivos, puede usar esta función:

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

Ejemplo:

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

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

Si desea truncar por varias letras pero no corta las palabras, use esto:

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

Ejemplo:

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

Answer 6

Truncar tubería con parámetros opcionales :

• límite - longitud máxima de la cuerda
• completeWords : marca para truncar en la palabra completa más cercana, en lugar de caracteres
• puntos suspensivos - sufijo final adjunto

-

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

No olvide agregar una entrada de módulo.

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

Uso

Cadena de ejemplo:

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

Margen:

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