Text overflow ellipsis once it invades parent padding
Hello, I have a container with wrapping flex items. The items are rectangles that have an icon and some text and have a set padding.
However, in some of there is too much text once they reach their minimum width and I want the text to overflow with ellipsis when it happens.
I tried setting
text-overflow: ellipsis; overflow: hidden on the <p> tag with text and text disappears where I want it to however no ellipsis appear.
Ideally I would want it to show as many lines as possible and ellipsis if the lines overflow into parent's padding
I provided a screenshot that hopefully shows what I mean, there's more text there and it clips on parent's padding but doesn't show ellipsis.
Here's a link to tailwind playground that has code of what I'm trying to do
https://play.tailwindcss.com/jNKKYAiNxRTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
5 Replies
You can try adjusting the window size to see items stretching/shrinking adequately. I capped the main container width just so you can see that text can overflow the first 2 items at their smallest size
text-overflow will only work if the text isn't wrapping.
So like, on your p, if you add text-wrap: nowrap and width: 100px you'll see it work.
I think you're after line-clampKevin Powell
YouTube
How to set a maximum number of lines of text with CSS
Limiting the total visible lines of text within an element is something I get asked about pretty frequently, and while there are probably some complex JavaScript solutions, there is a simple, though slightly strange, way to do it with CSS only.
#css
--
Come hang out with other dev's in my Discord Community
š¬ https://discord.gg/nTYCvrK
Keep u...
Looks like tailwind has this too:
https://tailwindcss.com/docs/line-clamp
It worked, tyvm for help