web-dev-qa-db-ja.com

Angular 2でテキストを切り捨てる方法

文字列の長さを数字に制限する方法はありますか？たとえば、タイトルの長さを20 {{ data.title }}に制限する必要があります。

長さを制限するためのパイプやフィルターはありますか？

angularangular2-template
81
him

テキストを斜めに切り捨てる2つの方法.

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 {}
252
Ketan Akbari

optional paramsを使用してPipeを切り捨てます。

  • limit - 文字列最大長
  • completeWords - 文字ではなく、最も近い完全なWordで切り捨てるフラグ
  • 省略記号 - 末尾の末尾の接尾辞

- 

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*** -->
52
Timothy Perez

あなたは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'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>

注：このコードでは1行にfullを使用しています。

Ketanの解決策は、Angular でそれを実行したい場合に最適です。

3
Shailesh Ladumor

私はこのモジュールを使ってきました ng2 truncate 、それはとても簡単なimportモジュールです。切り捨て：20}}

3
Kerim092

単語数 で切り捨てて省略記号を追加したい場合は、この関数を使用できます。

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…"
1
Gianfranco P.

@Timothy Perezの答えを試してみて、1行追加しただけです

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}`;
}
}
0
unos baghaii