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
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/jNKKYAiNxR
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/jNKKYAiNxR
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
