Text overflowing in a card component with CSS Grid and Tailwind CSS 3.0
I'm stuck on something that should probably be simple. I'm working with an scenario where text within a card component is overflowing its container despite using CSS Grid and Tailwind CSS 3.0 utilities. The card is supposed to have a fixed height with an overflow property set to hidden, but the text still spills out. I've tried various overflow settings, but nothing seems to work. Here’s a simplified version of my code: ```html <div class="grid grid-cols-1 w-full"> <div class="bg-white rounded-lg shadow-md h-40 overflow-hidden"> <div class="p-4"> <h2 class="font-bold text-lg">Card Title</h2> <p class="text-gray-700">This is a very long description that is supposed to be truncated if it exceeds the height of the card. However, it seems to overflow the card component even though I have set overflow-hidden.</p> </div> </div> </div> ``` Despite having `overflow-hidden` set, the paragraph text is still visible outside the card. I've also tried using `overflow-ellipsis` with `whitespace-nowrap` on the paragraph, but it doesn't seem to resolve the scenario. Here’s what I’ve attempted: - Ensured the card has a fixed height (h-40). - Used `overflow-hidden`, `overflow-ellipsis`, and `whitespace-nowrap` on the text element. - Tested it across different browsers (Chrome 117, Firefox 118) to rule out browser-specific issues. Any help on how to properly contain the text within the card would be greatly appreciated! Is there a better approach?