Respuestas:
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 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: 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;
}
}
En marcado
{{ str | truncate:[20] }} // or
{{ str | truncate:[20, '...'] }} // or
No olvide agregar una entrada de módulo.
@NgModule({
declarations: [
TruncatePipe
]
})
export class AppModule {}
return value && value.length > limit ? value.substring(0, limit) + trail : value;
transform(value: string, args: string[]): string
debería ser transform(value: string, args: any[]): string
ya que el primer argumento dado a la tubería es un número.
Truncar tubería con parámetros opcionales :
-
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;
}
}
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*** -->
limit = value.substr(0, 13).lastIndexOf(' ');
debería serlo limit = value.substr(0, limit).lastIndexOf(' ');
.
if (!value) { return ''; }
y if (value.length <= limit) { return value; }
${value.substr(0, limit)}${ellipsis}
; } `
Puede truncar texto basado en CSS. Ayuda a truncar un texto basado en el ancho, no en un carácter fijo.
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 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: este código se usa completo para una línea, no para más de una.
La solución de Ketan es la mejor si quieres hacerlo por Angular
He estado usando este módulo ng2 truncate , es bastante fácil, importa el módulo y estás listo para comenzar ... en {{data.title | truncar: 20}}
Aquí hay un enfoque alternativo que usa un interface
para describir la forma de un objeto de opciones que se pasará a través del pipe
en el marcado.
@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;
}
Luego, en tu marcado:
{{someText | textContentTruncate:{sliceStart: 0, sliceEnd: 50, append: '...'} }}
Muy simple usando la tubería de corte (tubería central de angular), como solicitó data.title
:
{{ data.title | slice:0:20 }}
De los documentos comunes de Angular https://angular.io/api/common/SlicePipe
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…"
extraído de: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts
Si desea truncar por varias letras pero no corte 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…"
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}`;
}
}
Pruebe este, si desea truncar basándose en palabras en lugar de caracteres y al mismo tiempo permitir una opción para ver el texto completo.
Vine aquí buscando una solución Leer más basada en palabras , compartiendo la costumbre que Pipe
terminé escribiendo.
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;
}
}
En plantilla:
<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;
}
}
En módulo:
import { ReadMorePipe } from '../_helpers/read-more.pipe';
@NgModule({
declarations: [ReadMorePipe]
})
export class ExamplePageModule {}