Card content does not fit in card


I’ve got an virtualscroll with virtualitems, the virutalitems are cards. I want to display text, video and images. The content of the card is added like this:

    <p [innerHTML]="newsFeedItem.content.text"></p>

The text gets wrapped, ionic just puts … whenever the content does not fit. I don’t mind this happening, its actually really good for displaying, but whenever this happens I want to show a ‘display more button’, so I can stretch the card untill it fits the content.

Question 1: How can I check if the text did not fit?
Question 2: How can I change the style of the card/content to size according to the content?


Sorry, I’ve been struggling with this for a few days now, but its not an ionic related problem


Actually virtual scroll is really only useable if you already know the dimensions of your content. It has too many quirks if you don’t know the right dimensions, because virtual scroll relies on calculating how many items fit in the viewport (thus it needs to already know the dimensions of the content to work properly). I would suggest you use a normal ion-list with an infinite scroll if you have to many content.

As far as the dots showing up, it has to do with css white-space. Set it to pre-wrap if you don’t want the dots. If you want to apply style changes when the content is larger then X, I would suggest you do that on the fly i.e. after rendering the content on the viewport recalculate dimensions and act on it.


Thank you for your this reply.

I’ll keep in mind the virtual scroll relies on calculating how many items fit, but I think the performance with virtuallscroll is better then rendering all the items I get from the server. Explanation: I rather have too much items rendered by virtuallscroll, then rendering all the items returned from server.

The dots were returned by the api I’m using, so thats where my solution will be implemented.

Thanks again


Also a solution off course. Sometimes (for example Wordpress REST api) gives you back cut off excerpts, good for first view display.