How to achieve `text-overflow: ellipsis` functionality, but the ellipsis is followed by a link
I made the grave mistake of picking up a frontend ticket because it looked really benign, but now I'm faced with this one last problem that has me stumped.
The text is possibly multiline and possibly truncated. I'm achieving that with
line-clamp
and text-overflow
. Is there any way to chuck a "See Post" link after the ellipsis on the same line so that it looks uniform with the rest of the text block?
Any pointers to how I can achieve that would be greatly appreciated.
Design screenshot attached.
what I have now:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna a...
what I want to achieve:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore ma...LINK
The width of the text is variable depending on the width of its container/parent element, so I don't think I can just replace the text beforehand. The font is also changeable by the user and needs to support various locales. 🤔
I cannot believe I'm struggling so much with something that seems like it would be so simple at first glance 🤦♂️I'm on the verge of asking product if they would mind if the link is below the text 😅0 Replies