Whenever the text exceeds the parent’s height, it will ignore the bottom padding. How can I fix this?
Here is the pen
Overflow:hidden hides any overflow that is outside the box. Padding is inside the box so content will happily flow into the padding area when there is overflowing content.
If I understand what you want then you would need the text in an inner container and set that inner container with overflow:hidden and to have 50px less height than the parent.
Or depending on the exact situation you could just rub out the text on the bottom with an absolutely placed pseudo element of suitable height and current background color.
e.g.
2 Likes
That’s what I was trying with. I pasted in an ellipsis for content and had the pseudo inherit the left padding. I don’t think it looks all that bad but AFAIK typically content is truncated server-side / display is manipulated with JavaScript.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.