可以使用带有省略号的 Ng-repeat答案

【问题标题】：Possible to use Ng-repeat with Ellipsis可以使用带有省略号的 Ng-repeat
【发布时间】：2013-09-26 11:26:51
【问题描述】：

我想在我的文本中给出...的效果，我正在使用 angularjs。

我们可以使用文本溢出吗：省略号；用 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>

【问题讨论】：

ng-repeat 是一个循环指令，它与您如何设置内容的样式无关。也许您可以更好地解释您的用例？
已更新代码。我希望它能工作，但它不工作！，我无法理解为什么

标签： javascript css angularjs ellipsis

【解决方案1】：

text-overflow 仅在overflow 属性与visible 不同时有效。

此外，max-width 不适用于不可替换的内联元素 (spec)，默认情况下是 spans。示例工作代码：

.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

【讨论】：

【解决方案2】：

你需要块元素，而不是跨度。
工作人员：http://plnkr.co/edit/BmGc5zQ49WVp7aqFyYLq?p=preview
此外，浏览器不是最支持此属性，因此请考虑使用“limitTo”过滤器。

【讨论】：