Would like to know any user friendly way to show text with huge length for a card of fixed width and height(as we have multiple cards for symmetry height and width are fixed for a card). In web view we are providing hover feature, so on hover complete text will appear. We just need a quick solution for mobile view just for now. One solution is allowing user to scroll text. Any other better approach ?
3 Answers
text-overflow: ellipsis; is a reasonably common pattern (https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow).
And would be a quick solution.
However, I don't think it's the best from a UX perspective unless you provide the means for the user to see the whole piece of text (similar to what Guy has said in their answer).
A combination of ellipsis and a press to scroll/reveal would probably be slightly better.
In an ideal world you define content boundaries and design for that. For example, a title should have minimum 2 and maximum 100 characters, then you can design your title block for worst case scenario and give it a height that supports 100 characters without needing ellipsis at all.
This is called different things in different businesses, but usually falls under the broader umbrella of a content strategy
I don't know how your design looks like, but you can try using overflow:hidden and fade out the text at the end of your card, when a user will click on the card it will open in full view (or any other way).
It would have been better if you had added an image of your design, but you can try, (1): decreasing the size of your design (all the cards) proportionally and make it so if the user clicks on the card it expands and adds the text. (2): in mobile view change the design to x rows and 2 columns, so you get to retain the length and width of the card.
Related