自定义div内部的自动换行

Question

Basically what's going on is I'm wanting to add a little bit of styling to my text-wrapping, the styling that I'm looking for is to indent after the text wraps, so the text will look like this for example:

This is text that should be 
    wrapped.

However currently it looks like this:

This is text that should be 
wrapped.

Also, I'm trying to figure out how to properly disable the left-right scroll-bar in my chat-area and apply text-wrapping for "words" that don't have any spaces. Example below

Current: (Applies horizontal scroll)

oejgoewgomgepoegwmopewjopvwemxdivheiwvmewcmoewmvnvpoewcewocmewinvew

Needed:

oejgoewgomgepoegwmop
    ewjopvwemxdivhei
    wvmewcmoewmvnvpo
    ewcewocmewinvew

I've supplied images to show you guys what I currently have and what I'm looking for below

What I have:

What I want:

Looking on stack-overflow showed that setting the

    overflow-y: scroll;

property would only show the scroll bar horizontally, but that doesn't seem to be the case.

If you need the css for my div, it's below:

#chatBoxDiv {
    position: absolute;
    background: white;
    height: 20%;
    width: 29%;
    left: 1%;
    bottom: 6%;
    opacity: 0.6;
    font-size: 12px;
    overflow-y: scroll;
}

Answer 1

What you are looking for is word-break: break-all for breaking long strings, and text-indent: -15px; and padding-left for indentation:

 #chatBoxDiv { height: 100px; width: 200px; font-size: 12px; overflow-y: scroll; word-break: break-all; padding-left: 15px; text-indent: -15px; } 

 <div id="chatBoxDiv">oejgoewgomgepoegwmopewjopvwemxdivheiwvmewcmoewmvnvpoewcewocmewinvew</div> 

Answer 2

Like so:

#chatBoxDiv
    margin-left:40px;
    text-indent:-40px;
}

Working example

Answer 3

word-wrap: break-word; text-overflow: ellipsis;