Reputation: 37
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.
Upvotes: 0
Views: 468
Reputation: 6585
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 */
}
Upvotes: 0
Reputation: 4110
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/
Upvotes: 0
Reputation: 809
You need to add the CSS break-word property to break up text without spaces.
word-wrap: break-word;
Upvotes: 2