javascript - EllipsisでNg-repeatが利用可能

Question

テキストに ... の効果を与えたいのですが、angularjs を使用しています。

text-overflow: ellipsis; を使用できますか? ng-repeat を使用して tex... 効果を与えるには？

私はそれがうまくいかないことを試しました。提案してください！

コード

<span style="white-space: nowrap; max-width: 2em; text-overflow: ellipsis; -o-text-overflow: ellipsis;" ng-repeat="data in g.k()">
    {{data.name}}
</span>

Answer 1

text-overflowoverflowプロパティが と異なる場合にのみ効果がありますvisible。

また、max-width置換されていないインライン要素 ( spec ) には適用されません。これspanはデフォルトです。作業コードの例:

.ellipsis {
  max-width: 3em;
  display: inline-block; /*enables max-width and overflow properties*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

クラスを要素に適用します。

<div ng-repeat="your loop directive">
  <span class="ellipsis">{{something}}</span>
</div>

デモ