word-wrap not working on a floating text

Question

Let's say I have this.

<div>
<div id="lala">
lalalala
</div>
</div>

css:

#lala
{
   float:left;
   word-wrap:break-word;
}

if the text inside #lala is big, it will look like this.

|                              |
|                              |
| lalalalalalalalalalalalalala | lalalalalala <-- these won't be show.
|                              |
|                              |

If I remove float:left; this will be the result.

|                              |
|                              |
| lalalalalalalalalalalalalala |
| lalalalalala                 |
|                              |

How can I have the second result while still using float?

Answer 1

give the element a fixed width so we know where to break the word:

#lala
{
float:left;
word-wrap:break-word;
width:?px;
}

The word-wrap:break-word property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.