Overflow from a div

I have a div that the client will be doing some actions that (with JavaScript) will change the content. Sometimes this content will get annoyingly long. Is there a "simple" way to do this? I've messed with the CSS "Overflow" property and it works alright but I'd rather only have a vertical scroll bar, no horizontal scroll bars.

This is also assuming that some of the content doesn't include spaces (which will produce the normal effect).

I need it to split it in the middle of the word if it requires doing so.

Example:

I want the overflow to acti
vate even if it is in the m
iddle of a word.

Thanks if you can. Here is a jsFiddle of what I'm kind of working with:

http:开发者_如何学Go//jsfiddle.net/DalexL/znzk2/

overflow-y: auto
overflow-x: none

and also

word-wrap: break-word;

there's also word-break

word-break: break-all;

current support is limited though, appears to be IE9, Chrome, Safari only, but may be worthwhile for the hyphenate option

word-break: hyphenate;

have you tried setting the width of the div? and its overflow to overflow:auto I think that should work.

If you set html and body overflow to hidden, and your div height to 100% with overflow auto, that will not work. The div will keep flowing out of the window as it was told to use 100% height of the body. if you want overflow to work, it needs to have a max-height at some point not exceeding the body height so that nothing gets hidden. http://jsfiddle.net/robx/XvcXC/1

Edit: So i misunderstood your problem as seem like something has changed since i first saw your question. Updated here http://jsfiddle.net/robx/XvcXC/2/ to break long lines of text.