How to handle overflow in Grid (grand-)children?
Hi, im currently working on a grid layout where the grid-items are either flex or grid themself.
The issue i have though, is that there is overflowing text which doesn't get recognized by the browser as overflow. So
overflow: hidden; doesn't have any effect.
I implemented a small prototype with which i can show the issue here:
https://play.tailwindcss.com/S1d0f4JYmk
When you toggle to mobile size, the text of the two smaller grid-items overflows behind the img in its container.
How can i prevent that from happening?Tailwind 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.
16 Replies
On the base grid remove
grid-template-rows unless you nee every row to be the same height
Then remove overflow hidden from the text
Remove height: 50% from text and images
Remove aspect-ratio from cards because you can't guarantee that they work (you could keep them if you are willing to not show all text and if you will change around the number of columns rather than having them get huge)
Make the text flex-grow: 1
Add min-height: min-content to imagesI cant remove
grid-template-rows from the base grid, since we want the rows to be same height and we increase the rows on smaller devices.
aspect-ratio was the only way to ensure that the small tiles retain their aspect-ratio when resizing (customer wants it that way).
And the <img> and text should also use 50% in their container.
Like i said this is just an example build to show the issue.
In our real codebase there are a couple of more grid-items, but the important thing for the small tiles was to ensure that they have a 4/3 aspect ratio and they should be split into 2 rows, each having 50% (text and img).
In our app, the user can edit these tiles and insert text, but we decided that we just want to hide overflowing text if they enter too much for the tile.I see, so you're not avoiding overflow. You will just have to show a bit of the text and have a gradient to make the text fade out (Wikipedia has this when you hover over a link if you want to see it being used).
As for the browser knowing how much text there is, it shouldn't be required to actually cut off the text. It's fine if screen readers see the whole block of text
im not sure i understand what you mean 😄 Do you mean adding a gradient to the top of the
<img> so that the text fades out behind the img?This is what Wikipedia has
It's trivial to do for a layout that is static and I'm trying it out for a responsive layout now
ah ok, never seen this. Well that would be a good alternative. We would've preferred something like
text-overflow: ellipsis; but thats no option since it restricts the text to 1 lineYeah
we also tried https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp but its poorly supported and doesn't work as expected
MDN Web Docs
-webkit-line-clamp - CSS: Cascading Style Sheets | MDN
The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.
I think I've got it
https://codepen.io/z-/pen/abMmZYw
It uses grid to hide text not half way and also place the gradient
I have no idea how you'd implement this with Tailwind
Also, you could swap
.fill with the image, text and image won't take up exactly 50% but they will be very close and there won't be an awkward gap under the texthttps://codepen.io/z-/pen/qBvaNYV (there is a CSS variable to change the padding between text and image)
this looks promising. I'll have to try it out later, thanks for your help thus far. Is it ok to ping you here if i have any more questions regarding this issue?
Absolutely ok
Replacing the video, the small gap annoyed me
Cleaned up the HTML and CSS