另一个 textarea 输入相关查询答案

【问题标题】：another textarea input related query另一个 textarea 输入相关查询
【发布时间】：2018-03-04 10:50:06
【问题描述】：

我不确定我的 CSS 哪里出了问题.. 任何帮助将不胜感激..

CSS

#commentbox {
  float: left;
  margin-top: 10px;
  background-color: #FFFFF0;
  display: block;
  width: 450px;
  border: 1px solid #999999;
  padding: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  text-align: left;
}

#commentbox .commenter_name {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  color: #660000;
  float: left;
  padding-left: 5px;
  display: block;
}

#commentbox .comment_content {
  display: block;
  float: left;
  clear: both;
  white-space: pre-wrap;
}

这是我的表单文本区域

<textarea name="vt_comment" cols="50" rows="5" wrap="hard" class="nontextarea" ></textarea>

这是显示评论的代码

<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
        do { ?>
<div id="commentbox">
  <!--Show Commenter Name -->
  <div class="commenter_name">
    <?php if ($row_cmnts_disp['member_nick']>"") {
            echo $row_cmnts_disp['member_nick'] ; 
            } else {
            echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ; 
            } ?> commented
  </div>

  <!--Show Comment -->
  <div class="comment_content">
    <?php echo $row_cmnts_disp['vt_comment']; ?>
  </div>

</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp)); 
    } // Show only if there are Comments loop ends 
    ?>

这就是它在数据库中的存储方式

1st Line of the Comment

2nd Line of the Comment with just a Line break

Double Line Break

这就是它在网站上的显示方式（第一行前面有空格）

Swami Donanandha commented

            hello

hello
hello

hello

as displayed online

无论我尝试什么更改，我都无法删除评论第一行之前的空格，除非我删除 CSS 中的 white-space:pre-wrap 设置...如果我这样做了中断消失只显示一个长句子....

Swami Donanandha commented
1st Line of the Comment 2nd Line of the Comment with just a Line break           Double Line Break

【问题讨论】：

标签： css textarea line-breaks

【解决方案1】：

您是否尝试过删除 white-space: pre-wrap 属性并在每条评论的末尾回显 HTML 中断标记？

<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
    do { ?>
    <div id="commentbox"> 
        <!--Show Commenter Name --> 
        <div class="commenter_name"><?php if ($row_cmnts_disp['member_nick']>"") {
        echo $row_cmnts_disp['member_nick'] ; 
        } else {
        echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ; 
        } ?>
        commented
        </div>

        <!--Show Comment: Added Break Tag Below-->
        <div class="comment_content">
        <?php echo "<p class='comment'>" + $row_cmnts_disp['vt_comment'] + "</p><br>"; ?>
        </div>

    </div>
    <?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp)); 
   } // Show only if there are Comments loop ends 
?>

您的 cmets 在删除 white-space 属性后连接成一个长字符串的原因是 .comment_content 类中的 float: left 属性。将类更新为以下内容应该可以解决您遇到的长字符串问题；

#commentbox .comment_content {
    display: block;
}

【讨论】：

您是否尝试过从 CSS 中删除 float:left 属性？
每条评论末尾的 html
中断看起来模棱两可，因为每条评论都单独显示 + 符号将其作为计算并返回一个数字....如果我删除了清除：两个都;属性，评论者名称和评论显示在同一行...
单个 'vt_comment' 是一个字符串吗？它在所述字符串中有任何 HTML 属性吗？将注释包装在 HTML 标记中应防止其将其视为计算。
Tom，vt_comment 是文本... cmets 通过 textarea 在帖子上发布，这是一个带有非文本区域类的 TinyMCE。我已将其发布在我的查询中

【解决方案2】：

我把它整理出来了...通过在数据库插入之前添加 nl2br 子句

$vt_comment = nl2br($_POST['vt_comment']);

并从 CSS 中删除 white-space:pre-wrap

虽然我仍然不知道为什么之前添加了额外的空格:-)

【讨论】：