7

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;
}
Lorenz
  • 737
  • 1
  • 7
  • 26
  • 1
    Look at this post : http://stackoverflow.com/questions/1638223/is-there-a-way-to-word-wrap-text-in-a-div – afshin Jul 19 '11 at 03:37
  • It should be doing that by [default](http://jsfiddle.net/alexdickson/BKtzH/). – alex Jul 19 '11 at 03:37
  • Thanks everyone. I think I figured it out. The text wasn't wrapping because a parent div was set to nowrap. – Lorenz Jul 20 '11 at 17:11

6 Answers6

6

@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/

sandeep
  • 91,313
  • 23
  • 137
  • 155
4

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

Dawson
  • 7,567
  • 1
  • 26
  • 25
2

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;
Levi Josman
  • 85
  • 1
  • 9
0

I was having a problem a lot like this for a while.

I had an interface that was taking user input with small amounts of HTML in it that would then display it on the side to show how it would like.

My problem was that I had been converting all spaces entered by the user into  , I wanted to do this so that spaces could be entered to format text; add indents and the like.

The effect, though, was that it was then overflowing instead of wrapping the text inside the div. An easy fix is to instead convert two spaces to   , and leave single spaces alone.

I realize that this probably isn't the same cause for everyone else, but I hope it helps someone!

Wh1T3h4Ck5
  • 8,399
  • 9
  • 59
  • 79
Yasha
  • 1
0

Not entirely sure what you want to do, but overflow:auto might be what you are after.

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

http://jsfiddle.net/jasongennaro/Vqukv/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
0

When you use absolute positioning, and set a height and width, the contents have no effect on the box itself, so you just have to set a min-height:50px, and it will grow with the text as appears here in this jsFiddle.

ar3
  • 3,883
  • 3
  • 21
  • 22