javascript - 可以将 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-overflow仅当 overflow 属性不同于 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>

Demo