Possible to use Ng-repeat with Ellipsis

Question

I want to give an effect of ... in my text and I am using angularjs.

Can we use text-overflow: ellipsis; with ng-repeat to give a tex... effect?

I tried its not working for me. Please suggest!

Code

<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 only has an effect when the overflow property is different from visible.

Also, max-width does not apply to non-replaced inline elements (spec), which spans are by default. Example working code:

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

Now apply the class to the element:

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

Demo

Answer 2

You need block element, not span.
Working plunker: http://plnkr.co/edit/BmGc5zQ49WVp7aqFyYLq?p=preview
Also, this property is not most supported by browsers, so think about using "limitTo" filter also.