Как усечь текст в Angular2?

Ответ 1

Два способа обрезать текст до углового.

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

1. Решение

  {{str | slice:0:6}}

Выход:

   how to

Если вы хотите добавить любой текст после строки среза, как

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

Выход:

 how to...

2. Решение (Создать заказную трубу)

если вы хотите создать собственный усеченный канал

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

В разметке

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

Не забудьте добавить запись модуля.

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

Ответ 2

Усеченная труба с необязательными параметрами:

• limit - максимальная длина строки
• completeWords - флаг для усечения при ближайшем полном слове вместо символа
• многоточие - добавленный конечный суффикс

-

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

Не забудьте добавить запись модуля.

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

использование

Пример строки:

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

Разметка:

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

Ответ 3

Я использую этот модуль ng2 truncate, его довольно простой модуль импорта, и вы готовы пойти... в {{data.title | truncate: 20 }} truncate: 20}}

Ответ 4

Вы можете обрезать текст на основе CSS. его помощь для усечения текста по ширине, а не по фиксированному символу.

пример

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

Примечание: этот код используется полностью для одной строки.

Ketan Solution лучше всего подходит, если вы хотите сделать это с помощью Angular

Ответ 5

Если вы хотите усечь несколькими словами и добавить многоточие, вы можете использовать эту функцию:

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

Пример:

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

взято из: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

Если вы хотите усечь несколькими буквами, но не вырезать слова, используйте это:

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

Пример:

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

Ответ 6

Только что попробовал @Timothy Perez ответить и добавил строку

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

Ответ 7

Используя эту трубу:

@Pipe({name: 'truncateText'})
export class HtmlToPlaintextPipe implements PipeTransform {
    public transform(value: string, args: any[] = []): any {
        return value ? String(value).replace(/<[^>]+>/gm, '') : '';
    }
}

В html обрежьте текстовую переменную:

<p>{{text | truncateText | slice:0:100}}{{text.length > 100 ? '...' : ''}}</p>