Edmund Julian Dantes
Edmund Julian Dantes

Reputation: 37

text wrap in a div - example inside

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

Answers (3)

Pandiyan Cool
Pandiyan Cool

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

UweB
UweB

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

LukeS
LukeS

Reputation: 809

You need to add the CSS break-word property to break up text without spaces.

word-wrap: break-word;

Upvotes: 2

Related Questions