Question

I have an absolutely positioned div with text inside it but it overflows over the edge of the width. If i use overflow:hidden then the overflow disappears. However, I want the text to wrap over multiple lines over the span of the height.

Am I missing something here? Thanks.

#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 44px;
height: 50px;
}

Answer 1

I forked around with @alex’s jsfiddle example to illustrate (further) the point he was making.

The text IS wrapping; however, you’ve set a height. A rigid height will keep the div from expanding, which is what I assume you wanted. The amount of text that wraps and fills the space is greatly going to depend on your line-height, font-size and any other CSS you may have applied to the contents of the container.

In the fiddle I forked, I set font-size:10px; line-height:1 – got 5 wrapping lines of text and the remaining contents are hidden by the height/width parameters you set in you declaration.

http://jsfiddle.net/Kbzga/

word-wrap, white-space, overflow:visible are probably not what you’re after unless you don’t mind the 44×50 green box with text spilling out of it, or scrollbars. HTH