2

最近、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に関連しているかどうかはよくわかりません。どうもありがとう！

4

2 に答える 2

1

このCSSを.commentクラスに追加してみてください。

word-break: break-all;

または

overflow: auto;
于 2013-03-07T23:15:14.527 に答える
0

You can solve this in css:

To hide what is not part of the box:

.comment {
  overflow: hidden;
}

To use the new css3 property to break the long word:

.comment {
  word-break: break-all;
}
于 2013-03-07T23:16:05.270 に答える