wordwrap with substr()

Hi all,
I’m having a problem that I just don’t get. On the main page of my site, I have a content area that updates as people post in the forum located within the site. I have a preview of those posts, and am using substr() to cut the posts to 40 characters. For some reason, the strings won’t wrap, and therefore extend the width of the container. Can you take a quick peek at the code and tell me if something jumps out? Thanks,
pj

edit: if I change the substr() to cut at 30 chars, it looks right, but i’d like to have it show something more like 150 chars…

PHP CODE:

[code=php]
<!–Start Recent Post code–>
<div class=”headerPosts”>Recent Posts</div>
<?php

//Connect to the server
$connid = mysql_connect (**** , **** , ****);

//Select the database
$dbSelect = mysql_select_db (****);

//Select headlines
$result = mysql_query(“SELECT * FROM smf_messages ORDER BY posterTime DESC”);

//setting counter variable
$counter = 0;

//Open table
echo ‘<div class=”contentPane”><table border=”0″>’;

while(($row = mysql_fetch_array($result)) & ($counter<3))
{
echo ‘<tr><td class=”recentPosts”>’;

//Subject & author
echo ‘<h3>’.$row[‘subject’].'<br /><small>by ‘.$row[‘posterName’].'</small></h3>’;

//body
if((strlen($row[‘body’]))>40)
{
echo ‘<p>’.substr($row[‘body’],0,40).’…</p><a href=”http://hookedonwinter.com/forum/index.php?topic=’.$row[‘ID_TOPIC’].’.msg’.$row[‘ID_MSG’].’#msg’.$row[‘ID_MSG’].'”><small>go to msg</small></a><br />’;
}
else
{
echo ‘<p>’.$row[‘body’].'<br /><a href=”http://hookedonwinter.com/forum/index.php?topic=’.$row[‘ID_TOPIC’].’.msg’.$row[‘ID_MSG’].’#msg’.$row[‘ID_MSG’].'”><small>go to msg</small></a></p>’;
}

//board name
$boardID = $row[‘ID_BOARD’];
$boardName = mysql_query(“SELECT * FROM smf_boards WHERE ID_BOARD=$boardID”);
while($row = mysql_fetch_array($boardName))
{
echo ‘<small>on board: ‘.$row[‘name’].'</small>’;
}

echo ‘</td></tr>’;
$counter++;
}

//ID_BOARD (smf_boards, name)

//close table
echo ‘</table></div>’;

//close server
mysql_close($connid);

?>
<!–End Recent Post code –>
</div>[/code]

CSS CODE:

[code=html]/* CSS Document */

body {
background-color:#8f9fa3;
font-family:”palatino Linotype”, “bookman Old Style”, “times New Roman”;

/*old colors
#666666 – grayish
#006699 – blueish
#196A90 – gray/blue
#303366 – blueish goodness
#819cae – not for bg, but good
#454954 – possibly best so far. dark grey/blue
*/
}

a:link {
color: #CCCCCC;
text-decoration: underline;
}

a:visited {
color: #AAAAAA;
text-decoration: none;
}

a:hover {
color: #454954;
}

.hereIAm{
text-transform:uppercase;
}

.back{
background-repeat:no-repeat;
background-position:center;
}

/*for now, each header and pane will have to have it’s own class*/

.headerNews {
background-color:#99bbbb;
font-weight:bold;
font-size:18px;
width:205px;
padding-left:10px;
padding-right:10px;
text-align:center;
border:solid thin #000000;
}

.headerPosts{
background-color:#99bbbb;
font-weight:bold;
font-size:18px;
width:206px;
padding-left:10px;
padding-right:10px;
text-align:center;
border:solid thin #000000;
}

.headerWiki{
background-color:#99bbbb;
font-weight:bold;
font-size:18px;
width:205px;
padding-left:10px;
padding-right:10px;
text-align:center;
border:solid thin #000000;
margin-left:5px;
}

.contentPane{
background:#668899;
color:#CCCCCC;
border:solid thin #000000;
margin-top:5px;
}

.recentNews{
font-size:10px;
width:200px;
padding-left:10px;
padding-right:10px;
float:left;
margin-top:5px;
}

.recentPosts{
font-size:12px;
width:200px;
padding-left:10px;
padding-right:10px;
margin-top:5px;
text-align:justify;
}

.recentChanges{
font-size:12px;
width:227px;
padding-bottom:5px;
padding-left:5px;
margin-top:5px;
}

.newPages{
font-size:12px;
width:227px;
padding-bottom:5px;
padding-left:5px;
margin-top:5px;
clear:left;
}

.mainContent{
color:#BBB;
background-color:#303366;
font-size:14px;
font-weight:bold;
padding-left:10px;
padding-right:10px;
padding-top:.5px;
padding-bottom:.5px;
}[/code]

Also in #PHP _↴