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

@junerockwell wrote:

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.

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

Posts: 2

Participants: 2

Read full topic