Make text wrap inside an absolutely positioned div

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

@lorenz; to wrap the word you have to use word-wrap property in your div as afshin said in his comment for example

#absolute_div

    {
        background-color: #8cc63f;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 0px 5px 0px 5px;
        width: 44px;
        min-height: 50px;
        overflow:hidden;
        word-wrap:break-word;
    }

check this http://jsfiddle.net/aE8cg/

Answer 2

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 44x50 green box with text spilling out of it, or scrollbars. HTH

Answer 3

This worked for me...

white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;