Geek Answers Handbook

Can use Ng-repeat with ellipsis

I want to give an effect ... in my text and I use angularjs.

Is it possible to use text-overflow: ellipsis; with ng-repeat to get tex effect ...

I tried so that it does not work for me. Please suggest!

the code

<span style="white-space: nowrap; max-width: 2em; text-overflow: ellipsis; -o-text-overflow: ellipsis;" ng-repeat="data in gk()"> {{data.name}} </span>
+4
source share
2 answers

text-overflow only works when the overflow property is different from visible .

In addition, max-width not applied to unoccupied inline elements ( spec ), by default span . 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

+4
source

You need a block element, not a span.
Working plunker: http://plnkr.co/edit/BmGc5zQ49WVp7aqFyYLq?p=preview
In addition, this property is not supported by most browsers, so consider using the "limitTo" filter.

0
source

More articles:


All Articles