text wrap in a div - example inside

Question

I am trying to wrap text inside a div with text from mysql and it seems to flow over the set width. i am using this as the code.

<div style='width:100px; min-height:20px; float:left; margin-left:10px; border:1px solid #ccc; white-space: none;'>
<? echo "".$row['msg']."<br><br>"; ?>
</div> 

http://www.2click4.com/test/mods/chatrooms/index2.php?cid=Noosa-Heads@-Queensland@-Australia

here is the site i am trying to get the result on. you will see the 2 larger posts.

Answer 1

您需要添加CSS break-word属性来分解没有空格的文本。

word-wrap: break-word;

Answer 2

If a word is longer than the allocated space, it will flow over the bounds of the div's rectangle. The only thing you could do is add the following to the div's style:

word-break: break-all;

This will allow CSS to break any word anywhere in the middle, going against normal word breaking rules. Example: http://jsfiddle.net/vY9U4/

Answer 3

Try out this

.wordwrap { 
white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;      /* IE */
}