1

This is a script I have for a shoutbox - 

$result = mysql_query("SELECT * FROM `shoutbox` ORDER BY `id` DESC LIMIT 5");
while($r=mysql_fetch_array($result))
{
$time=$r["time"];
$id=$r["id"];
$message=$r["message"];
$name=$r["name"];
echo "<div style='position:relative;'>";
echo $name."&nbsp;&nbsp;&nbsp;".$message."<br/>".$time."<br/>"; 
echo "</div>";
}

The problem is that this code doesn't text-wrap and I tried adding text-wrap with no success. When I enter long text without spaces, the text gets out of the div. How can I fix this? And, as you might have noticed I have limited the number of messages by 5 using DESC LIMIT 5 I'd like to know how I can make the div scrollable so that when scrolled down more than the 5 messages earlier messages are shown.

user1928108
  • 101
  • 2
  • 11

1 Answers1

0

It is working as charm, collected from 'Aaron Bennett'

<style>
.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 */
}
</style>

<?php

echo "<div 
    style='width:150px; height:200px; overflow:auto;' class='wordwrap'>
        LongwordLongwordLongwordLongwordLongwordLongwordLongwordLongwordLongwordLongwordLongwordLongwordLongwordLongwordLongwordLongword
    </div>";    
?>

Reference: https://stackoverflow.com/a/1638824/2459296

Community
  • 1
  • 1
MD SHAHIDUL ISLAM
  • 14,325
  • 6
  • 82
  • 89
  • Sorry to say but that didn't work.. Keeping in mind the width and height available for the shoutbox on my site, I used `width:120px;height:200px;overflow-y:auto; overflow-x:hidden` but the shoutbox just got elongated with that code. – user1928108 Sep 05 '13 at 13:23
  • this script doesn't fix my problem too.. This one hides the longword instead of braking it – user1928108 Sep 05 '13 at 13:52
  • Damn! I am really sorry for the comment earlier. The code you updated worked for me. Had forgot to clear the cache before trying. I am sorry. But, still it doesn't bring the scroll option. Still the older messages i.e., after number 5 are disappearing.. – user1928108 Sep 05 '13 at 14:02
  • I did a change using overflow:auto; removed overflow-y:auto; overflow-x:hidden actually it is working in different browser in my pc – MD SHAHIDUL ISLAM Sep 05 '13 at 14:12
  • Nothing yet. The longword does break now, but there's no scroll down – user1928108 Sep 06 '13 at 02:56