[Solved]How to add Ellipsis once text doesn't fit the container?

ionic-v1
1

I have text that vary in length for each <ion-item>. I’m using collection-repeat for performance reasons. I’ve added class="item-text-wrap" to the <ion-item> so that the text wraps. But the text goes outside it’s content. I need the the text to wrap but not overflowing to the outside of its container and it should end with Ellipsis to let the user know that there’s more of the text.

Here’s a CodePen to illustrate what’s going on http://codepen.io/junerockwell/pen/ONQvJN?editors=1010 (Make sure the CodePen preview window is small enough to see this overflow of text happening)

This is what the desired outcome; the text wraps but since there’s more to the text, it’s ended by an ellipsis.

image

Any ideas, suggestions, work arounds, etc? Thanks.

2

If you are willing to ignore issues of varying character widths in a given font, and simply declare a maximum character count before the ellipsis kicks in, you could use something like the pipe described in this article.

EDIT: Sorry, didn’t notice this was v1. You could look at this directive.

3

Thanks @rapropos. The angular-ellipsis for Ionic v1 helps.