注释系统CSS文本跳出框

我最近用PHP编写了一个简单的注释系统。

http://runescapepvp.net/jony/index.php

正如你在下面我发布的链接中看到的，如果评论很长，它会跳出框。我不知道为什么当我为文本设置了最大宽度时，它会发生。

我用这个来称呼这些盒子

function showComments() {
    $query = mysql_query("SELECT * FROM `comments` ORDER BY `comment_id` DESC LIMIT 5") or die (mysql_error());
    $allcomments = mysql_query("SELECT * FROM `comments` ORDER BY `comment_id`") or die (mysql_error());
    if (mysql_num_rows($query) == 0) {
        echo '<br /><br />';
        handleAlerts("noComments");
    } else {
        while ($row = mysql_fetch_assoc($query)) {
            echo "
            <br />
            <br />
            <div class='comments'>
                <div class='title'><span class='author'>Posted by: ".$row['comment_guest']."</span><span class='date'>At ".$row['comment_time'].", ".$row['comment_date']."</span></div>
                <div class='comment'>
                    <span class='message'>
                    ".$row['comment']."
                    </span>
                    <br />
                    <a href='index.php?delete=comment&id=".$row['comment_id']."'><div class='button_delete'>Delete</div></a>
                </div>
            </div>
            ";
        }
    }
        echo '<br /><br /><br />';
}

CSS:

.title {
background-image: url("../img/header.png"); background-repeat: repeat-x;
width: 100%;
height: 56px;
border: solid 1px #a8a8a8;
line-height: 56px;
font-size: 17px;
color: grey;
text-align: left;
display: block;
}
.comments {
position: relative;
top: 50px;
}

.comment {
width: 640px;
height: auto;
display: block;
min-height: 100px;
background-color: #e6e6e6;
border-left: solid 1px #a8a8a8;
border-right: solid 1px #a8a8a8;
border-bottom: solid 1px #a8a8a8;
}
.message {
width: 600px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
}

为什么会这样?我不确定这个错误是否与PHP有关。非常感谢!

word-break: break-all;

overflow: auto;

.comment {
  overflow: hidden;
}

.comment {
  word-break: break-all;
}