Css absolute position and overflow:hidden don’t go so well

This is my code http://jsfiddle.net/noppanit/8D7QN/

As you can already see that the text overflows out of the container, I tried putting overflow:hidden into the text already but it didn’t work. I understand that because it’s absolute position, so technically it’s out of the container. But I’m not sure how to fix this. The text has to be on top of the image that’s why I make it absolute position.

If you guys could shed some light to me, that’s be awesome. I’m very new at CSS.

Problem courtesy of: toy

Solution

You need to set a height on the .text_content
( example
) or, preferably
, set overflow:hidden;
on .text_image
( example
).

Solution courtesy of: 0b10011

Discussion

You assume that it is overflowing out of the container. It is not. The container has a background that is not repeated and is smaller than the container. The container has no height
css and thus sizes to the content.

Discussion courtesy of: DMoses

I would do something like this:

http://jsfiddle.net/8D7QN/7/

Discussion courtesy of: Sammy

This recipe can be found in it’s original form on Stack Over Flow
.

责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Css absolute position and overflow:hidden don’t go so well

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录