I am looking for a way to hide the text in these cards so that they’re all the same size -with an ellipsis at the end of each paragraph, and an EXPAND / COLLAPSE button under the paragraph so that users can see the rest of the text and close it down once they’re done.
Can someone please advise me on the best way to do this? I have seen some options with interactions and custom code, but have yet to find direction on how to do all of this at once.
Hi there - I do see his responses but I’m not seeing guidance on how to add an EXPAND / COLLAPSE button under the paragraph so that users can see the rest of the text and close it down once they’re done
I’d just build that part with interactions, that would be simplest for you.
You’d have a “contracted” height which is eg. 150px, and then an “expanded” height of auto. The button click would toggle that state, you can follow accordion examples to learn more.
With CSS line-clamping, the text would automatically add your ellipses when there isn’t enough space to display it.
I would like to add that that is very bad UX as you are shifting elements around (under). To better understand what I’m talking about you can get some knowledge about CLS.
or find on YT “Optimize for Core Web Vitals” from “Chrome for developers” channel if you would not understand fully the article
