Error when wrapping text in a div

Question

Can you tell me why there's a break after varun09 in the picture below? It's kind of weird because it only happens whenever the statement is bigger than the actual width of the <div>, and I'd like to know how to wrap the text? I want the vertical scroll option, but not the horizontal scrolling bar.

I am populating the <div> with Mysql data through Php.

The code is:

while ($row = mysql_fetch_assoc($query_run)) {
    echo '<p>'.$row['user_name'].' '.$row['chat_body'].'</p><br> ';
}

Answer 1

You need to set the white-space in order for it to wrap for you, but the space after varun09 will cause the next one to go to the next line. Try this combination:

jsFiddle Demo

p { word-wrap: break-word; white-space:pre; }​

Info on white-space here

Answer 2

jsBin demo

use for your element the CSS property word-wrap:

word-wrap: break-word;

Answer 3

You can use word-wrap property:

selector {
    word-wrap: break-word;
}