Làm thế nào để cắt ngắn văn bản trong Angular2?

Có cách nào để tôi có thể giới hạn độ dài của chuỗi thành một ký tự số không? ví dụ: Tôi phải giới hạn độ dài tiêu đề là 20 {{ data.title }}.

Có đường ống hoặc bộ lọc nào để hạn chế chiều dài không?

Hai cách để cắt ngắn văn bản thành góc cạnh.

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

1. Giải pháp

  {{str | slice:0:6}}

Đầu ra:

   how to

Nếu bạn muốn nối bất kỳ văn bản nào sau chuỗi lát cắt như

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

Đầu ra:

 how to...

2. Giải pháp (Tạo đường ống tùy chỉnh)

nếu bạn muốn tạo đường ống cắt ngắn tùy chỉnh

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

Đang đánh dấu

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

Đừng quên thêm một mục mô-đun.

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

Cắt ngắn ống với các thông số tùy chọn :

• giới hạn - độ dài tối đa của chuỗi
• hoàn thành - Gắn cờ để cắt ngắn từ hoàn chỉnh gần nhất, thay vì ký tự
• dấu chấm lửng - hậu tố theo sau được nối thêm

-

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

Đừng quên thêm một mục mô-đun.

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

Sử dụng

Chuỗi ví dụ:

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

Đánh dấu:

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

Bạn có thể cắt bớt văn bản dựa trên CSS. Nó giúp cắt ngắn một văn bản dựa trên chiều rộng không cố định ký tự.

Thí dụ

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>

Lưu ý: mã này sử dụng đầy đủ cho một dòng không cho nhiều hơn một.

Giải pháp của Ketan là tốt nhất nếu bạn muốn làm điều đó bằng Angular

Tôi đang sử dụng mô-đun ng2 này , mô-đun nhập khá dễ dàng và bạn đã sẵn sàng ... trong {{data.title | cắt ngắn: 20}}

Đây là một cách tiếp cận thay thế sử dụng một interfaceđể mô tả hình dạng của một đối tượng tùy chọn sẽ được chuyển qua pipetrong đánh dấu.

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

Sau đó, trong đánh dấu của bạn:

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

Rất đơn giản bằng cách sử dụng ống lát (ống lõi của góc), như bạn đã yêu cầu data.title:

{{ data.title | slice:0:20 }}

Từ các tài liệu phổ biến về Angular https://angular.io/api/common/SlicePipe

Nếu bạn muốn cắt bớt một số từ và thêm dấu chấm lửng, bạn có thể sử dụng chức năng này:

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

Thí dụ:

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

được lấy từ: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

Nếu bạn muốn cắt bớt một số chữ cái nhưng không cắt bớt từ, hãy sử dụng cách này:

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

Thí dụ:

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

Vừa thử câu trả lời của @Timothy Perez và thêm một dòng

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

đến

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

Hãy thử cách này, nếu bạn muốn cắt ngắn dựa trên Từ thay vì ký tự trong khi cũng cho phép tùy chọn để xem văn bản hoàn chỉnh.

Đến đây để tìm kiếm giải pháp Đọc thêm dựa trên các từ , chia sẻ tùy chỉnh mà Pipetôi đã viết.

Ống:

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

}

Trong Mẫu:

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

Thành phần:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

Trong mô-đun:

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

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}