Question

我最近用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有关。非常感谢！

Answer 1

您可以尝试将此CSS添加到.comment类：

word-break: break-all;

或者

overflow: auto;

Answer 2

您可以在css中解决此问题：

隐藏不属于该框的内容：

.comment {
  overflow: hidden;
}

使用新的css3属性来打破长词：

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

注释系统CSS文本开箱即用

2 个答案: