Wordwrap within css div

Question

I am having issues with wordwrapping within my div container. Here is the code for this specific section of code. I want it to automatically wrap to next line even if there are no spaces in the specified line of text.

#content {
    position: justify;
    font-size: 10px;
    font-family: Times new roman;
    width: 80%;
    padding: 10px 10px 10px 10px;
    height: auto;
    overflow-x: auto;
    color: #000;
}

Solution 1

You need word-wrap:break-word.

jsFiddle example

#content {
    word-wrap: break-word;
    position:justify;
    font-size: 10px;
    font-family: Times new roman;
    width: 80%;
    padding: 10px 10px 10px 10px;
    height: auto;
    overflow-x: auto;
    color: #000;
}

Solution 2

Add this to your CSS

word-wrap: break-word;