Limit characters and have three dots after in angular js and ionic

Question

I'm working with AngularJS and Ionic, I'm using the ng-bind-html to pull data from a rest API. I want to limit the amount of characters but also have three dots after the characters to show the user there is more to read...

So far I have:

<p ng-bind-html="item.excerpt | limitTo: 100"></p>

But this just limits the characters and cuts them off.

this question has already been answered [there][1] [1]: http://stackoverflow.com/questions/18095727/limit-the-length-of-a-string-with-angularjs — Coder55, Aug 06 '15 at 15:05

score 23 · Answer 1 · answered Jan 12 '17 at 20:53

23

For a pure angular approach, you can do something like this:

{{(item.excerpt | limitTo: 100) + (item.excerpt.length > 100 ? '...' : '')}}

answered Jan 12 '17 at 20:53

c0r3yz

835
8
19

Thanks for the help. Exactly what I needed. – Amitabh Sarkar Apr 17 '17 at 07:47
1

In the new angular versions, there's 'slice' pipe instead of the 'limitTo' pipe: https://angular.io/api/common/SlicePipe – Tony Feb 28 '21 at 17:46

score 13 · Answer 2 · answered Aug 07 '15 at 08:12

Honestly your question seems more oriented to css

You can truncate text, and add dots (...) using "ellipsis"

Example, if you have inside html something like:

<p class='ellipsis'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur<p>

and you add something like this on css :

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

p.block {
    width: 300px;
}

Result is something like :

<p class='ellipsis'>Lorem ipsum dolor sit amet ...</p>

If you want implement a button "read more", on click, just remove the 'ellipsis' class, and all text will be displayed.

More info there : Ellipsis info

score 2 · Answer 3 · answered Jan 31 '18 at 19:18

In my project I came up with this filter:

angular.module('yourModule').filter('limitToDots', function($filter) {
    return function(input, limit, begin, dots) {
        if (!input || input.length <= limit) {
            return input;
        }

        begin = begin || 0;
        dots = dots || '...';

        return $filter('limitTo')(input, limit, begin) + dots;
    };
});

Usage:

<span>{{ text | limitToDots : 50 }}</span>
<span ng-bind="text | limitToDots : 50"></span>
<span ng-bind-html="text | limitToDots : 50"></span>

score 1 · Answer 4 · answered Jan 21 '19 at 13:22

1

If you're using older ionic version which doesn't have 'limitTo:' on binding
like what @c0r3yz 's answer, try this in your html

{{ item.excerpt.length > 100 ? item.excerpt.substring(0,100)+"..." : item.excerpt }}

answered Jan 21 '19 at 13:22

Yudhistira Bayu

293
1
3
13

score 0 · Accepted Answer · answered Aug 07 '15 at 09:27

0

Fixed this with the https://github.com/sparkalow/angular-truncate. Real simple and easy to use and it can be used with ng-bind-html

answered Aug 07 '15 at 09:27

Sole

3,100
14
58
112

score 0 · Answer 6 · answered Jul 10 '19 at 08:06

0

Text truncate class in Bootstrap did the job for me.

Note: The container should have a fixed width or column proportion for this to work

Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

answered Jul 10 '19 at 08:06

Prakash M.

479
8
26

Limit characters and have three dots after in angular js and ionic

6 Answers6