私はこのような文字列持って

Question

をngbindする3個のドットを追加します。

<a href="#" ng-bind="::MyString | limitTo:40"></a> 

をしかし、40以上の私はそれを行うことができますどのように、長さだけで文字列の後に3個のドットを追加する必要がありますか？これはES6で書かれているが、このフィルタは、あなたが必要なものをやらせます

Answer 1

：

import * as _ from 'lodash'; 
/* @ngInject */ 
export default() => (input, length) => 
    _.size(input) > length ? 
    `${input.slice(0, length)}...` : input; 

その後、フィルタとしてそれを使用することができます

<span data-ng-bind="foo | ellipsis-filter: 20"> 

は20個の文字にそれを制限し、あなたの省略記号を追加します。

Answer 2

あなたはフィルタを自分で作成することなく、テンプレートでそれを解決したい場合は、単にこれを行うことができます：独自のフィルタを作成するなど

<a href="#" ng-bind="(MyString | limitTo:40) + (MyString.length > 40 ? '...' : '')"></a> 

として空想されていないが、トリックを行う必要があります。

Answer 3

コメントとして、これを達成するにはCSSを使用する必要があります。これにより、データが変更されず、UIの美しさが維持されます。

また、すべての文字の幅が異なります。それは文字の長さよりも総幅を調べる方が良い。

.limit { 
 
    width: 200px; 
 
    text-overflow: ellipsis; 
 
} 
 
.ellipsis { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    width: 100px; 
 
    white-space: nowrap; 
 
}

<input type="text" class="limit"> 
 

 
<div class="ellipsis"> 
 
    <a href="#">This is a test for ellipsis using CSS</a> 
 
</div>