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

Question

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

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.

javascript
angularjs
ionic-framework

Answer 1

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

Answer 2

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