I am reading educational data from facebook and showing it to my page directly. I find some string too long so i want to put ... after certain number of character in angularjs.
ex
jeevan sadhana english medium high school 08
to
jeevan sadha..
-
html5hub.com/ellipse-my-textWottensprels– Wottensprels2014-07-21 13:02:09 +00:00Commented Jul 21, 2014 at 13:02
-
why not with css? This is a good example: codepen.io/bmarshall511/pen/xxZBQPzMahdiyeh– Mahdiyeh2022-07-20 09:13:11 +00:00Commented Jul 20, 2022 at 9:13
Add a comment
|
5 Answers
There are two possible solutions.
- Using pure CSS, use
text-overflow: ellipsis;along withoverflow: hidden;. Obviously, your element will have to be fixed width. - You can use an Angular module such as angular-truncate.
Comments
Create filter in angular code.
Working http://jsfiddle.net/tUyyx/
Use filter code give in fiddle.
Then filter your content like :
{{ name | truncate : 25}}
Comments
If you want to add ellipses after n number of lines then we can do this using Jquery.dotdot plugin Check this link Adding ellipses after n-bumber of lines in AngularJs
1 Comment
Kevin
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
maxLength = 10;
str = str.length > maxLength ? str.substr(0, maxLength) + '...' : str;
2 Comments
Wottensprels
I don't know man. Sure, this works. But first, you need to write some unnecessary JavaScript and second, you lose the original string completely.
Oh yes, it is definately destructive in that regard. In terms of unnecessary JS, I beg to differ on that point (you'd probably put it as a
$scope variable though), because it could be reused throughout the scope of the controller and made dynamic if one were to turn this piece of code into a filter and pass the length into said filter. That way, you wouldn't loose the original string. However, should one want to do that, angular-truncate is probably the best bet as suggested by Zopieux.I used these three css stylings and it worked for me:
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
Also ensure that the width is fixed (in px or %age).
