How can I make text on the next line instead of overflow?

Question

I have a fixed width div on my page that contains text. When I enter a long string of letters, it overflows. I do not want to hide the overflow. I want to display overflow on a new line, see below:

<div id="textbox" style="width:400px; height:200px;"> dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf </div> 

In any case, disable the overflow and put the overflow text on a new line ??? Twitter does something like this, but I can't figure it out with CSS, maybe they use Javascript.

Can anyone help with this?

Answer 1

 word-wrap: break-word 

But this is CSS3 - http://www.css3.com/css-word-wrap/ .

Answer 2

Just add

 white-space: initial; 

the text of the line will automatically appear in the next line.

Answer 3

Try the <wbr> - not as elegant as the word-wrap property others have suggested, but it's a working solution as long as all major browsers (read IE) implement CSS3.

Answer 4

Well, you can embed one or more soft hyphens ( ­ ) in your long, continuous lines. I doubt that older versions of IE handle this correctly, but what it should do is tell the browser about valid word breaks that it can use if necessary.

Now, how exactly do you choose where to stuff these characters? It depends on the actual string and what it means, I think.