評論系統CSS文本開箱即用

我最近使用PHP編寫了一個簡單的評論系統。評論系統CSS文本開箱即用

正如你在下面的鏈接我張貼看，如果註釋很長，它會得到開箱即用。林不知道爲什麼它發生時，我已經設置了文本的最大寬度。

即時通訊使用這個調用箱

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相關。非常感謝！

來源

2013-03-07 purepksor purepk

您可以在CSS解決這個：

.comment { 
    overflow: hidden; 
}

要使用新的css3屬性來打破長詞：

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

來源

2013-03-07 23:16:05 jeroen

但是，這不適用於所有網絡瀏覽器，對不對？溢出只是隱藏它，我希望它能像斷字一樣工作：break-all;這很棒，但是有沒有其他方法可以用舊的CSS版本來實現？ – 2013-03-07 23:18:18

@purepksorpurepk支持相當不錯：http://caniuse.com/#search=word-wrap。一個替代（和醜陋的...）解決方案將在php中使用'wordwrap'：http://php.net/manual/en/function.wordwrap.php – jeroen 2013-03-07 23:20:44

謝謝，PHP沒有工作，但支持如你所說似乎很好。我決定用那個;） – 2013-03-07 23:31:32

你可以嘗試加入這個CSS的.comment類：

要隱藏什麼不盒的一部分：

word-break: break-all;

或者

overflow: auto;

來源

2013-03-07 23:15:14 j08691

評論系統CSS文本開箱即用

回答

相關問題